javascript 挂载事件Demo

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="zh-CN" />
    <style>
    .btn {
        width: 400px;
        height: 30px;
    }
    .btnStyle0
    {
        background: #9f4;
        border: 1px solid red;
    }
    .btnStyle1
    {
        background: #f99;
        border: 1px solid red;
    }
    .btnStyle2 {
        background: #ff9;
        border: 1px solid white;
    }
    .center {
        display: -webkit-box;
        -webkit-box-orient: horizontal;
        -webkit-box-pack: center;
        -webkit-box-align: center;
        display: box;
        box-orient: horizontal;
        box-pack: center;
        box-align: center;
    }
    </style>
    <title>js 挂载事件Demo</title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>

    function btnClick(e,s) {
        document.getElementById('msg').innerText = e.innerText + "   " + s;
    }

    $(document).ready(function() {
        'use strict'

        //原生js批量添加事件,
         document.getElementById('buton0').addEventListener('click', function (e) {
            document.getElementById('msg').innerText = e.currentTarget.innerText;
            return false;
        }, false)

        //固定参
        //-------------------    方案一    -------------------
        //var elmts = document.getElementsByClassName('btn');
        //使用 let i = 0 创建块级作用域
        //target会显示 <span>我是按钮4</span> 6  ， currentTarget 才正常
        // for (let i = 0; i < elmts.length; i++) {
        //     elmts[i].addEventListener('click', function (e) {
        //         document.getElementById('msg').innerText = e.currentTarget.innerHTML +"   "+  i;
        //         return false;
        //     }, false)
        // }
        //-------------------    方案二    -------------------
        //如果不用let i = 0的话，就要利用匿名函数的作用域把参数传进去存住。
        //外面这层是用来存参数的，里面返回的匿名函数才是给事件用的。
        var elmts = document.getElementsByClassName('btnStyle2');
        for (var i = 0; i < elmts.length; i++) {
            elmts[i].addEventListener('click', function (i) {
                return function (e) {
                    document.getElementById('msg').innerText = e.currentTarget.innerText +"   "+  e.currentTarget.id;
                };
            }(i + 1), false);
        }


        //--------------  JQuery 批量添加事件  ---------------
        //没有for传固定参数的效果。换种思路，给按钮设个ID然后执行时判断就行了。
        $(".btn.btnStyle1").click(function(e) {
            document.getElementById('msg').innerText = "被点击的按钮ID是： " + this.id;
        });
		// jquery 动态绑定事件
		$("body").on('click','.dc', function(e){
			document.getElementById('msg').innerText = "动态创建的对象，要动态绑定事件，body监控子对象如果新增了class为.dc的元素就给它绑定事件。按钮ID是： " + this.id;
		});
		$("#msg").before(`<div id="buton7" class="btn btnStyle2 center dc"> <span>动态创建的对象，要动态绑定事件</span> </div>`);
		$("#msg").before(`<div id="buton8" class="btn btnStyle2 center dc"> <span>动态创建的对象，要动态绑定事件</span> </div>`);
		$("#msg").before(`<div id="buton9" class="btn btnStyle2 center dc"> <span>动态创建的对象，要动态绑定事件</span> </div>`);
        //----------------------------------------------------
        //传参数 动态添加 onclick 属性，实现传参
        $("#msg").before(`
            <div id="buton10" onclick="btnClick(this,'呵呵达');" class="btn btnStyle1 center"> 
                <span>动态添加 onclick 属性，实现传参</span> 
            </div>
         `);

        //动态添加元素，实现传参
        $("#msg").before(`<div id="buton11" class="btn btnStyle2 center"> <span>动态添加元素，实现传参</span> </div>`);
        $("#buton11").attr('onclick',"btnClick(this,'呵呵达');");

    });
    </script>
</head>

<body>
    <div id="buton0" class="btn btnStyle0 center"> <span>原生Js 直接添加 点击事件</span> </div>
    <div id="buton1" class="btn btnStyle2 center"> <span>匿名函数传参1</span> </div>
    <div id="buton2" class="btn btnStyle2 center"> <span>匿名函数传参2</span> </div>
    <div id="buton3" class="btn btnStyle2 center"> <span>匿名函数传参3</span> </div>
    <div id="buton4" class="btn btnStyle1 center"> <span>JQuery 用自身ID判断 4</span> </div>
    <div id="buton5" class="btn btnStyle1 center"> <span>JQuery 用自身ID判断 5</span> </div>
    <div id="buton6" class="btn btnStyle1 center"> <span>JQuery 用自身ID判断 6</span> </div>
	<div></div>
    <div id="msg"></div>
</body>

</html>
javascript 挂载事件Demo

猜你喜欢
