绑定和清楚事件，内部环境

一时失言乱红尘 2022-05-26 10:52 106阅读 0赞

**第一种绑定方式**

ele.on事件类型 = function () \{\}

兼容性很好，但是同一个元素的同一个事件上只能绑定一个处理函数。

也可以写在HTML行间。

写在script中

<body>
    
    <div id="demo" style="width: 100px;height: 100px;background-color: blue;">
    
    </div>
    
    <script type="text/javascript">
    
    var div = document.getElementsByTagName('div')[0];
    
    div.onclick = function () {
    	
    div.style.backgroundColor = 'red';
    	
    }
    
    </script>

写在行间HTML中

<body>
    
    <div id="demo" style="width: 100px;height: 100px;background-color: blue;"
     οnclick="div.style.backgroundColor = 'red';">
    
    </div>
    
    <script type="text/javascript">
    
    var div = document.getElementsByTagName('div')[0];
    
    </script>
    </body>

清除事件的方法：ele.on事件类型 = null或false

--------------------

**第二种绑定方式**

ele.addEventListenner(事件类型，处理函数，false)

可以为同一个元素同一个事件绑定多个处理函数

IE9以下不兼容

注意：

事件为字符串形式，不用写on

不能绑定同一个处理函数！！

<body>
    
    <div id="demo" style="width: 100px;height: 100px;background-color: blue;">
    
    </div>
    
    <script type="text/javascript">
    
    var div = document.getElementsByTagName('div')[0];
    
    div.addEventListener('click',test,false);
    
    function test() {
    	
    div.style.backgroundColor = 'yellow';
    	
    }
    
    </script>
    
    </body>

清除事件的方法：

ele.removeEventListenner(事件类型，处理函数，false)，

处理函数不能为匿名函数，不然无法清除。

--------------------

**第三种绑定方式（IE独有）**

ele.attachEvent('on' + 事件类型,处理函数)

测试 ie8 可以用，高版本 ie 不支持

清除事件的方法：

ele.detachEvent("on" + 事件类型，处理函数)，

处理函数不能为匿名函数，不然无法清除。

--------------------

**事件处理程序的运行环境**

ele.on事件 = function () \{\}

<body>
    
    <div style="width: 100px;height: 100px;background: red;"></div>
    
    <script type="text/javascript">
    	
    var div = document.getElementsByTagName('div')[0];
    	
    div.onclick = function () {
    	
    console.log(this)
    	
    }
    	
    </script>
    
    </body>

程序  this  指向是  dom  元素本身

![QQ浏览器截图\_20180327112730\_6B2A63D70B164f6281F35727D0D3A130.jpg][QQ_20180327112730_6B2A63D70B164f6281F35727D0D3A130.jpg]

--------------------

ele.addEventListenner

程序  this  指向是  dom  元素本身

--------------------

div.attachEvent('onlick',test)

程序  this  指向是  window

--------------------

封装一个方法兼容所有浏览器元素绑定事件

[QQ_20180327112730_6B2A63D70B164f6281F35727D0D3A130.jpg]: http://blog.mobaii.com/Public/Uploads/2018-03-27/5ab9ba2b42f42.jpg