【Javascript Day18】

标签事件绑定的属性参数

阻止默认行为

dialog的实现及组织冒泡（捕获）传递

基于冒泡的事件委托

键盘事件的事件源对象信息

JS的自动触发操作

标签事件绑定的属性参数

<input type="button" value="事件绑定" οnclick="funA(event,this)">
<input type="button" value="事件绑定" id="btn1">
<input type="button" value="事件绑定" id="btn2">
<script>
function funA(e,dom){
console.log(e);
// console.log(this);
console.log(dom);

}

// JS为元素绑定事件，默认只有一个参数，该参数是事件对象
// JS为元素绑定的事件，在方法中this关键字，表示当前事件绑定的DOM对象
var btnDom1 = document.querySelector("#btn1");
btnDom1.onclick = function(e){
console.log(e);
console.log(this);
}

var btnDom2 = document.querySelector("#btn2");
btnDom2.addEventListener("click",function(e){
console.log(e);
console.log(this);
})

阻止默认行为

<a href="https://www.baidu.com" οnclick="showTip()">百度</a>
<script>
function showTip(){
alert(1)
}
</script>
<hr>
<a href="javascript:void(0)">为元素默认行为关键属性取值 javascrip:void(0)</a>
<hr>
<a href="https://www.baidu.com" οnclick="return false">为元素默认行为对应事件，绑定return false</a>
<hr>
<a href="https://www.baidu.com" οnclick="printMsg(event)">为元素默认行为对应事件回调，通过事件对象的preventDefault() 代码</a>
<script>
function printMsg(e){
console.log("msg",e);
e.preventDefault();
}
</script>

dialog的实现及组织冒泡（捕获）传递

基于冒泡的事件委托

<input type="button" value="addItems" οnclick="addItems()">
<ul id="list" οnclick="execUlFun(event)">

</ul>
<script>
// 事件代理|事件委托
// 将多个子元素的事件基于事件冒泡机制，交给父元素绑定并完成执行
// 优点：减少资源占用->提高运行效率
// 缺点：功能逻辑会比较复杂
var tagNames = ["LI","SPAN"]
function execUlFun(e){
// console.log("ul的点击事件",e.target,e.currentTarget);
console.log("ul的点击事件-DOM对象",e.target);
// console.dir(e.target)
// if(e.target.tagName=="LI"){
// console.log("ul的点击事件-内容",e.target.innerHTML);
// }
if( tagNames.includes(e.target.tagName) ){
// console.log("ul的点击事件-内容",e.target.innerHTML);
// 具体的业务逻辑需要具体的分析
console.log("ul的点击事件-内容",e.target.innerText,e.target,e);
}

}

键盘事件的事件源对象信息

<input type="text" οnkeydοwn="downFun()" οnkeypress="pressFun()" οnkeyup="upFun()">
<script>
function downFun(){
console.log("被按下down");
}
function pressFun(){
console.log("被按下press");
}
function upFun(){
console.log("弹起up");
}
</script>

<hr>

<input type="text" οninput="inputUserWord()">
<script>
function inputUserWord(){
console.log("有值输入");
}
</script>

<hr>

<textarea οnkeydοwn="printEvent(event)"></textarea>
<script>
function printEvent(e){
console.log(e);
// 按键内容
console.log(e.key);
// 按键内容的ASCII编码 - 弃用
console.log(e.keyCode);
}
</script>
<div class="box" οnkeydοwn="printKey(event)" contenteditable></div>
<script>
function printKey(e){
console.log(e);
console.log(e.key);
}
</script>
<hr>
<script>
window.onkeydown = function(){
console.log("window监控");
}
</script>

JS的自动触发操作

<h1 id="count">0</h1>
<input id="btn" type="button" value="累加" οnclick="addCount()">
<script>
var count = 0;
var h1Dom = document.querySelector("#count");
h1Dom.innerHTML = count;

function addCount(){
console.log("addCount");
count++;
h1Dom.innerHTML = count;
}

// js为dom对象的所有事件，都提供一个同名的触发方法，该方法只要被调用，会立即执行事件对应的函数
var btnDom = document.querySelector("#btn");
// 自动调用点击功能
// btnDom.click();

// 延迟计时器
// setInterval( fun,time-ms );
// 每过time时间长度，自动执行一次 fun 方法
setInterval( function(){
btnDom.click();
},500 )
</script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/70256.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！