3 JS 和 Jquery 绑定点击事件

3 JS 和 Jquery 绑定点击事件

jquery:

jQuery绑定事件_迷亭君的博客-CSDN博客_jquery给按钮绑定事件

    // 方式1
    // 绑定增加任务按钮点击事件函数
    function bind_add_task_btnClick() {
        //根据id属性的值从文档中获取这个元素
        $("#add_task").bind("click", function () {
            //响应做的事情
            alert("按钮点击事件");
        })
    }   
    // 整个网页加载完成后执行这个函数
    $(function () {
        // 绑定增加任务按钮点击事件函数
        bind_add_task_btnClick();

    });

方式2 相对方式1 省略了再套一层函数的麻烦
核心绑定方式可以一样， 即 $("#btn").click()和 $("#btn").bind("click",xxx) 一样

	// 方式2 
    $("#btn").click(function () {
        //能正常触发事件
        alert("btn 111");
    });

原生js

JavaScript—事件绑定 (多种方式、传递参数） - jack_Meng - 博客园 (cnblogs.com)

JavaScript中几种常见的获取元素的方式_码仙♥的博客-CSDN博客_js根据class获取元素

    //根据id属性的值从文档中获取这个元素
    var btnobj = document.getElementById("btn");
   // 方式1 为当前的这个按钮元素(对象),注册点击事件,添加事件处理函数(匿名函数)
    btnobj.onclick = function () {
        //响应做的事情
        alert("hi==22");
    };

    // 方式2 加载页面后再绑定具体函数
    window.onload=function(){
        document.getElementById("btn1").onclick = sayHellow; //注意不要带（）
    }
  
    function sayHellow(){
        alert("hi==")
    }

// 方式3 标签内绑定
<button id="add_task" type="button" class="btn btn-primary" onclick="sayHellow(this)">增加</button>