事件的绑定

最新推荐文章于 2022-11-09 11:45:50 发布

zmj2051176726

最新推荐文章于 2022-11-09 11:45:50 发布

阅读量149

点赞数

分类专栏： javaScript

本文链接：https://blog.csdn.net/xiaoxingxingzai/article/details/102788551

版权

javaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

一.绑定事件
事件本来就存在，绑定的是事件处理函数。比如：

<div>111</div>

这也可以点击，没有变化只是因为没有绑定事件处理函数。

二.onclick是on+事件类型

三.绑定事件处理函数方式
1.element.onxxx=function(event){}

兼容性很好，但是一个元素的同一个事件上只能绑定一个处理程序
基本等同于写在HTML行间上。
将even（事件）作为参数，就是这个“点击”事件，通过这个even，可以获取到event.target，就是点击的对象等等属性。even参数可加可不加，需要用到的时候就加。
解绑事件：element.onxxx=null;
比如只能点击一次：

<body>
<div>111111</div>
<script type="text/javascript">
    var div=document.getElementsByTagName('div')[0];
    div.onclick=function () {
        console.log("a");
        this.onclick=null;
    }
</script>
</body>

2.obj.addEventListener(“type”,fn,false)
IE9以下不兼容，可以为一个事件绑定多个处理程序。

event：必须。字符串，指定事件名。
注意: 不要使用 “on” 前缀。例如，使用 “click” ,而不是使用 “onclick”。
function 必须。指定要事件触发时执行的函数。
当事件对象会作为第一个参数传入函数。事件对象的类型取决于特定的事件。例如， “click” 事件属于 MouseEvent(鼠标事件) 对象。
useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行
可能值:
true - 事件句柄在捕获阶段执行
false- 默认。事件句柄在冒泡阶段执行
解除事件处理程序：ele.removeEventListener(“type”,fn,false)。

<script type="text/javascript">
    window.onload=function () {
        var btn=document.getElementsByTagName("button")[0];
        btn.addEventListener("click",function () {
            alert("hh对的");
        },false)
    };
</script>
<body>
<button>点击</button>

</body>

3.obj.attachEvent(‘on’+type,fn);
IE独有，一个事件同样可以绑定多个处理程序。
解除事件处理程序：obj.detachEvent(on+type,fn)

五.事件处理程序的运行环境
1.element.onxxx=function(event){}

程序this指向是dom元素本身

2.obj.addEventListener(“type”,fn,false)

程序this指向是dom元素本身

3.obj.attachEvent(on+type,fn);

程序this指向window

六.封装兼容性的addEvent(ele,type,handle)方法
addEventListener()中的this，是绑定事件的对象
attachEvent()中的this，是window
需要统一两个方法this

参数：

elem 要绑定事件的对象
type 事件的字符串类型(不要on)
handle 回调函数

<body>
<script type="text/javascript">
    function addEvent(elem,type,handle) {
    /*若元素没有addEventListener属性，elem.addEventListener值为undefined，布尔值为false*/
        if(elem.addEventListener){
            elem.addEventListener(type,handle,false);
        }else if(elem.attachEvent){
            elem.attachEvent('on'+type,function () {
            //在匿名函数中调用回调函数，匿名函数是由window调用的，而handle的this是obj
                handle.call(elem);
            })
        }else {
            elem['on'+type]=handle;
        }
    }
</script>
</body>

例如：

<body>
<button>点击</button>
<script type="text/javascript">
    function addEvent(elem,type,handle) {
        /*若元素没有addEventListener属性，elem.addEventListener值为undefined，布尔值为false*/
        if(elem.addEventListener){
            elem.addEventListener(type,handle,false);
        }else if(elem.attachEvent){
            elem.attachEvent('on'+type,function () {
                //在匿名函数中调用回调函数，匿名函数是由window调用的，而handle的this是obj
                handle.call(elem);
            })
        }else {
            elem['on'+type]=handle;
        }
    }
    var btn=document.getElementsByTagName("button")[0];
    
    addEvent(btn,"click",function () {
        alert("hh对的");
    })
</script>
</body>

zmj2051176726

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件的绑定

一.绑定事件事件本来就存在，绑定的是事件处理函数。比如：<div>111</div>这也可以点击，没有变化只是因为没有绑定事件处理函数。二.onclick是on+事件类型三.绑定事件处理函数方式1.element.onxxx=function(event){}兼容性很好，但是一个元素的同一个事件上只能绑定一个处理程序基本等同于写在HTML行间上。将ev...
复制链接

扫一扫