美文网首页时光轴
原生 js 事件绑定

原生 js 事件绑定

作者: 侯工 | 来源:发表于2018-09-19 20:10 被阅读1次

源码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="button" value="test1" id="btn1" class="btn">
<input type="button" value="test2" id="btn2" class="btn">
<input type="button" value="test3" id="btn3" class="btn">
<script>
    var EventUtil={
        /*检测绑定事件*/
        addHandler:function(element,type,handler){
            if(element.addEventListener){
                element.addEventListener(type,handler,false);
            }else if(element.attachEvent){
                element.attachEvent('on'+type,handler);
            }else{
                element["on"+type]=handler /*直接赋给事件*/
            }
        },
        /*通过removeHandler*/
        removeHandler:function(element,type,handler) {   /*Chrome*/
            if (element.removeEventListener){
                element.removeEventListener(type, handler, false);
            }else if (element.deattachEvent) {               /*IE*/
                element.deattachEvent('on' + type, handler);
            }else {
                element["on" + type] = null;
            }
        }
    };
    // 获取元素
    var btn=document.getElementsByClassName("btn");
    // 事件
    var bangding=function(){
        alert("你好!")
    }
    // 给btn添加 bangding 事件
    EventUtil.addHandler(btn[0],"click",bangding);
</script>
</body>
</html>

更多咨询:

1、Git 汇总
2、VUE
3、前端开发

相关文章

  • React基础第二节知识点

    1.绑定事件使用原生绑定事件onClick2.绑定事件函数必须传this(原生JS this作用域的问题)3.使用...

  • React-阻止事件冒泡

    react中分为合成事件、原生事件 合成事件:在jsx中直接绑定的事件,如 原生事件:通过js原生代码绑定的事件,...

  • 原生JS事件绑定方法以及jQuery绑定事件方法bind、liv

    一、原生JS事件绑定方法: 1、通过HTML属性进行事件处理函数的绑定如: <a href="#" oncli...

  • vue 事件处理

    v-on:eventName 绑定事件 事件修饰符 对应原生JS .prevent阻止默认事件-----.prev...

  • 原生 js 事件绑定

    源码: 更多咨询: 1、Git 汇总2、VUE3、前端开发

  • js原生事件绑定

    关于事件绑定的面试题和实际运用 如何编写一个通用的原生事件监听函数? 关于低版本的浏览器我们只需要了解就好了,如果...

  • JavaScript中绑定事件的方法与区别

    简介 在编写网页过程中,我们需要给页面上的元素添加事件(绑定事件)。在 原生JS 中,绑定事件有两种处理方式:DO...

  • 20、jQuery 事件机制

    20、jQuery 事件机制 原生js事件与jQuery事件: (1)用原生的js给div注册事件 原生js注册相...

  • 原生js实现on与off 方法

    @拭目以待:原生js实现on与off 方法 使用过jQuery的同学,应该对事件绑定方法 .on() .off()...

  • 03.JQuery的事件处理

    JQuery提供了事件绑定机制,类似于原生JS中的addEventListener形式。 1. ready() D...

网友评论

    本文标题:原生 js 事件绑定

    本文链接:https://www.haomeiwen.com/subject/vuceyftx.html