JavaScript 事件 事件绑定 事件解除

<div></div>

//事件绑定的方法

div.onclick = function (){} //function里的this指向DIV
-----------------------------------------------
//obj.addEventListener(type,fn,false) IE9以下不兼容,可以为一个事件绑定多个处理程序 function里的this指向div
div.addEventListener(‘click‘,function (){},false);
div.addEventListener(‘click‘,test,false);

function test(){
//....
}
---------------------------------------------------
//obj.attachEvent(on+‘type‘,fn) IE独有,一个事件可以绑定多个处理函数 this指向window

div.attachEvent(‘onclick‘,function(){
handle.call(div);
})

function haddle(){
this//......

}
//解决this指向的问题
------------------------------------------------
//事件绑定函数封装

 1 function addEvent(elem,type,handle){
 2         if(elem.addEventListener){
 3             elem.addEventListener(type,handle,false);
 4         }else if(elem.attachEvent){
 5             elem.attachEvent(‘on‘+type,function (){
 6                 handle.call(elem);
 7             })
 8         }else{
 9             elem[‘on‘+type] = handle;
10         }
11
12     }
13
14 addEvent(div,click,fn);

//解除事件绑定
elem.onclick = null;
elem.removeEventListener(type,fn,false);
elem.dettachEvent(‘on‘+type,fn);

原文地址:https://www.cnblogs.com/Lemon-Vinegar/p/8823938.html

时间: 2024-10-05 06:17:27

JavaScript 事件 事件绑定 事件解除的相关文章

javascript为元素绑定事件响应函数

javascript中为元素设置响应时间有两种方法. (1):object.onclick=functionName; 这种方法不可以传递参数. (2):object.onclick=function(){ functionName(arg1,arg2,...); } 这种方法就可以传递参数了. javascript为元素绑定事件响应函数

jQuery学习-事件之绑定事件(三)

在上一篇<jQuery学习-事件之绑定事件(二)>我们了解了jQuery的dispatch方法,今天我们来学习下handlers 方法: handlers: function( event, handlers ) {         var sel, handleObj, matches, i,             handlerQueue = [],             delegateCount = handlers.delegateCount,             cur =

jQuery学习-事件之绑定事件(二)

在上一篇<jQuery学习-事件之绑定事件(一)>我们了解了jQuery的add方法,今天我们来学习下dispatch方法: dispatch: function( event ) { //这里是修正event对象的属性,处理兼容性问题         event = jQuery.event.fix( event ); var i, ret, handleObj, matched, j,             handlerQueue = [],//事件队列             arg

JavaScript跨浏览器绑定事件函数的优化

转载自:http://www.cnblogs.com/yugege/p/5169998.html JavaScript作为一门基于事件驱动的语言(特别是用在DOM操作的时候),我们常常需要为DOM绑定各种各样的事件.然而,由于低版本的IE的不给力,在绑定事件和移除事件监听上都与众不同,我们常常需要自己封装一个跨浏览器绑定(移除)事件的函数.跨浏览器添加(移除)DOM事件的一种非常经典的实现代码如下: //跨浏览器添加事件 function addHandler(target, eventType

javascript 循环遍历绑定事件问题

<!DOCTYPE html> <html manifest="/browser_page_mng/html/4/1000266/cache.manifest"> <head> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> <meta charset="utf-8"> <t

JavaScript之元素绑定事件

元素绑定事件的方法 Element.addEventListener(); Element.attachEvent(); 相同点和不同点 相同点: 都可以为元素绑定事件 不同点: 1.方法名不一样 2.参数个数不一样:addEventListener三个参数,attachEvent两个参数 3.addEventListener 谷歌,火狐,IE11支持,IE8不支持 attachEvent 谷歌火狐不支持,IE11不支持,IE8支持 4.this不同,addEventListener 中的thi

jquery事件与绑定事件

1.首先,我们来看一下经常使用的添加事件的方式: <input type="button" id="btn" value="click me!" onclick="shao();" /> <script type="text/javascript"> function shao() { alert("msg is showing!"); } </script

jQuery学习-事件之绑定事件(一)

我们都知道jQuery的事件其思想来源于Dean Edwards的addEvent,通过源码我们知道jQuery在为元素绑定事件时,每种类型的事件(click,blur)时只绑定了一次对应类型的事件处理方法,实际的方法是存在jQuery的缓存系统中的,这样做的好处我就不多说了,绑定方法的函数为add方法,在执行事件的时,通过handers在缓存系统中获取事件列表,然后通过dispatch函数来执行对应的事件. jQuery.event = { add: function( elem, types

IE和DOM事件流、普通事件和绑定事件的区别

IE和DOM事件流的区别 IE采用冒泡型事件 Netscape(网络信息浏览器)使用捕获型事件 DOM使用先捕获后冒泡型事件 示例: <body> <div> <button>click</button> </div> </body> 冒泡型事件模型:button->div->body (IE事件流) 捕获型事件模型:body->div->button (Netscape事件流) DOM事件模型:body-&g

jquery移除事件,绑定事件,触发事件

$('.gcddfadf-btn-pay').unbind('click');//移除绑定事件 $('.gcddfadf-btn-pay').bind('click',function(){});//绑定事件$('.gcddfadf-btn-pay').trigger('click');//触发事件 触发自定义事件bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数. $('#btn').bind("myclick",function(){....});