day51—JavaScript绑定事件

转换学开发,代码100天——2018-05-06

今天学习JavaScript的绑定事件。因为浏览器的原因绑定事件需要考虑兼容性问题。

attachEvent     IE浏览器 ,ie9以上事件执行顺序与绑定顺序相同;ie9以下事件执行顺序与绑定顺序相反

btn.attachEvent("onclick",function(){
   alert("a");
});

detachEvent

btn.detachEvernt("onclick",function(){
   alert("a");
});

addEventListener FF及chrome浏览器
btn.addEventListener("click",function(){
     alert("a");
});

removeEventListener
btn.renoveEventListener("onclick",function(){
   alert("a");
});

如对一个按钮添加多个事件:

<script type="text/javascript">
        window.onload = function(){
            var btn = document.getElementById("btn");
            addMyEvent(btn,"click",function()
            {
                alert("a");
            });
            addMyEvent(btn,"click",function()
            {
                alert("b");
            });
        }

        function addMyEvent(obj,ev,fn){
            if (obj.attachEvent) {
                obj.attachEvent("on"+ev,fn);
            }
            else{
                obj.addEventListener(ev,fn);
            }
        }
    </script>

原文地址:https://www.cnblogs.com/allencxw/p/8997758.html

时间: 2024-07-30 01:46:23

day51—JavaScript绑定事件的相关文章

JavaScript绑定事件的方法[3种]

要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定"事件处理函数".所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数. 一. 在DOM元素中直接绑定 一. 在DOM元素中直接绑定这里的DOM元素,可以理解为HTML标签.JavaScript支持在标签中直接绑定事件,语法为:    onXXX="

javascript绑定事件addEventListener与attachEvent

1.eleObj.addEventListener(eventName,handle,useCapture); eleObj:DOM元素: eventName:事件名称.注意,这里的事件名称没有“ on ”,如鼠标单击事件 click ,鼠标双击事件 doubleclick ,鼠标移入事件 mouseover,鼠标移出事件 mouseout 等. handle:事件句柄函数,即用来处理事件的函数: useCapture:Boolean类型,是否使用捕获,一般用false: 2.eleObj.at

javascript绑定事件

本质:不同的库或者工具中总是封装了不同的事件绑定形式,但是究其根源,还是IE事件模型和W3C事件模型不同的处理方式 1)W3C事件模型:支持事件捕捉和冒泡 addEventListener('type',function(){},bool) removeEventListener ('type',function(){},bool) 2)IE事件模型:仅支持事件冒泡 attachEvent('type',function(){}); detachEvent('type',fucntion(){}

JavaScript 绑定事件时传递数据

var data = { name: 'Ruchee', email: '[email protected]' }; data.handleEvent = function (e) { console.log(this); }; document.getElementById('test_button').addEventListener('click', data, false); 重点:1. 绑定事件时传递数据本身2. 传递的数据中需要定义有一个 handleEvent 方法来负责事件响应

JavaScript绑定事件跟解绑事件的兼容代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" value="按钮" id="bt"/> <input type=

javaScript绑定事件委托 demo

事件绑定通常发生在 onload 或 DOMContentReady , 事件绑定占用 处理时间 占用内存, 而且不是每个事件都会被 点击执行. 由此 事件委托 可以优化事件绑定行为.. 事件逐层冒泡 直到被父级元素捕获. 事件代理  给外层元素绑定一个处理事件, 就可以处理子元素上出发所有事件. DOM 标准 事件三个阶段: 捕获 到达目标. 冒泡 IE 不支持捕获, 但冒泡够用了. event.currentTarget 事件处理程序当前正在处理事件的那个元素 event.target 事件

JavaScript绑定事件时的闭包问题

在写网页的时候,我们经常需要为一组DOM元素绑定同一事件,比如页面上有3个div,我们给他们绑定一个click事件来alert数组letters中和他们序号对应的字母: function bindEvent(){ var letters = ['A','B','C']; var elems = document.getElementById('panel').getElementsByTagName('div'); var len=elems.length; for(var i=0; i<len

JavaScript中事件绑定的方法总结

最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看. JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScript代码中直接绑定 3 绑定事件监听函数 一.在DOM元素中直接绑定 也就是直接在html标签中通过 onXXX=“” 来绑定.举个例子: <input type="button" value="点我呦" onclick="alert("he

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

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