jQuery 移除事件与模拟事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css">
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
    <button id="test">?</button>
    <button id="del">del</button>
    <button id="simulation">simulation</button>
    <button id="data">data</button>
    <script>
        $(function(){
            $("#test").bind("click.ns",func1=function(){
                console.log(1);
            }).bind("mouseover.ns",func2=function(){
                console.log(2);
            }).bind("click",func3=function(){
                console.log(3);
            });
            //bind方法实际上可以同时绑定多个事件类型给一个函数
            //用命名空间规范事件类型
            //注意第一个与第三个，对于相同的事件名称用不同的命名空间执行方法进行按需调用
            $("#del").bind("click",function(){
                $("#test").unbind(".ns",func1);//移除ns空间下的事件
                $("#test").unbind("click",func1);//移除点击事件中的func1
                //当不写参数时，即移除其所有绑定事件
            })

            //.trigger("click!"): 匹配所有没有被规范入命名空间的click事件
            // jQuery提供了一个一次性的使用方法，one()，只会触发一次，然后就被移除

            // 模拟操作，如模拟用户的点击
            $("#simulation").mouseover(function(){
            $("#simulation").trigger("click");//也可直接.click()
            });
            $("#simulation").click(function(){
                console.log("success simulation");
            })
            // trigger()方法能够触发自定义的事件，如在bind中设置触发事件为blabla，可以用.trigger("blabla")模拟这个事件
            //传递数据
            $("#data").bind("sp",function(event,argu1,argu2){
                $("#data").parent().append("<p>"+argu1+argu2+"</p>");
            })
            $("#data").trigger("sp",["testtext1","testtext2"]);
        })
        
    </script>
</body>
</html>
jQuery 移除事件与模拟事件

猜你喜欢
