DOM0 DOM2事件绑定写法

最新推荐文章于 2022-08-01 17:30:38 发布

没脾气的猫

最新推荐文章于 2022-08-01 17:30:38 发布

阅读量350

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/badoldboy/article/details/109689986

版权

绑定事件的两种方式

事件三要素

1.事件源：绑定事件的节点。
2.事件处理函数：点事件触发时，执行的代码（函数体）
3.事件类型：(单击，hover,move)

DOM0 的写法：onclick

element.onclick = function () {
    }

<body>
<button>点我</button>
<script>
    var btn = document.getElementsByTagName("button")[0];

    //这种事件绑定的方式，如果绑定多个，则后面的会覆盖掉前面的
    btn.onclick = function () {
        console.log("事件1");
    }

    btn.onclick = function () {
        console.log("事件2");
    }

</script>
</body>

DOM2

书写格式.addEventListener(事件类型，事件处理函数，Boolean)–添加事件监听器
参数3：捕获性(true)、冒泡型( false )–默认–事件流如果不写，则默认为false

 let divEle = document.querySelector("div");
 divEle.addEventListener("click" ,function(){
     window.alert("!!!")
 },false );

DOM0和DOM2的区别

DOM0的优缺点：
优点：兼容性好
缺点：
1、同一个事件类型只能绑定一个事件处理函数
2、事件流（冒泡）
DOM2的优缺点：
优点：
1、同一个事件类型，可以绑定多个事件处理函数
2、事件流（冒泡、捕获）
缺点：兼容性低

事件对象

当事件的响应函数被触发时，会产生一个事件对象event。浏览器每次都会将这个事件event作为实参传进之前的响应函数。

事件对象：事件处理函数的参数
function(e) e就是事件对像
e.target 触发事件的节点

   let liEle = document.querySelectorAll("li");
 for(let i of liEle){
     i.addEventListener("click",function (e){
         //提升兼容性
        let event = e || window.event;
        console.log(event.target);
     });
 };

DOM事件流

<article>
        <section>
            <div></div>
        </section>
    </article>
    <script>
let arEle = document.querySelectorAll("article")[0];
let seEle = document.querySelectorAll("section")[0];
let divEle = document.querySelectorAll("div")[0];
//事件捕获
arEle.addEventListener("click",function(){
        console.log(`arEle`);
    },true); 
seEle.addEventListener("click",function(){
        console.log(`seEle`);
    },true); 
divEle.addEventListener("click",function(){
        console.log(`divEle`);
    },true);
    //捕获阶段，事件依次传递的顺序是：window --> document --> html--> body --> 父元素、子元素、目标元素。
    //当点击div时会输出的顺序是：`arEle`   --> `seEle` --> `divEle
   // 当点击section时会输出的顺序是：`arEle`   --> `seEle` 
//事件冒泡
    arEle.addEventListener("click",function(event){
    //event.stopPropagation();
        console.log(`arEle`);
    },false); 
seEle.addEventListener("click",function(event){
    // event.stopPropagation();
        console.log(`seEle`);
    },false); 
divEle.addEventListener("click",function(event){
// event.stopPropagation();
        console.log(`divEle`);
    },false);
//当点击div时会输出的顺序是：`divEle   --> `seEle` --> `arEle`
   // 当点击section时会输出的顺序是：`seEle`    --> `arEle`
   
//不是所有的事件都能冒泡
 event.bubbles //来判断如果返回值为true，说明该事件会冒泡；反之则相反。
 
   //阻止冒泡的方法   w3c的方法：（火狐、谷歌、IE11）
    //event.stopPropagation();
</script>

没脾气的猫

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM0 DOM2事件绑定写法

绑定事件的两种方式事件三要素1.事件源：绑定事件的节点。2.事件处理函数：点事件触发时，执行的代码（函数体）3.事件类型：(单击，hover,move)DOM0 的写法：onclickelement.onclick = function () { }<body><button>点我</button><script> var btn = document.getElementsByTagName("button")[0];
复制链接

扫一扫