欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JqueryOn绑定事件方法介绍

程序员文章站 2024-01-29 13:35:34
JqueryOn绑定事件方法介绍 1. 简介 (1) On()方法在被选及子元素上添加一个或多个事件处理程序 (2) 在jquery 版本1.7起,on()方法是bind(),live()和delegate()方法的新的替代品,该方法给API带来很多便利,简化了JQUERY代码库。 (3) 使用on ......

jqueryon绑定事件方法介绍

 

1. 简介

(1) on()方法在被选及子元素上添加一个或多个事件处理程序

(2) 在jquery 版本1.7起,on()方法是bind(),live()和delegate()方法的新的替代品,该方法给api带来很多便利,简化了jquery代码库。

(3) 使用on()方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)

2. 目前了解到使用场景

(1) 使用ajax请求数据时使用。

(2) 对加载完页面之后的元素进行事件绑定。

3. 注意事项

(1) 你使用jquery追加的元素要在一个不会进行改变的父级之下,可以是document。

(2) 绑定有两种方式

① 单个事件绑定

1) $(“#id”).on(‘click’,function(){})    把点击事件绑定到id为id的元素身上

2) $(“#id”).on(‘click’,’.div’,function(){})  把点击事件绑定到id为id的子级元素类名为div的元素身上

② 多事件同时绑定到一个元素上

③ $(“.div”).on({

mouseover:function(){$(“body”).css(“background-color”,”red”)},

mouseout:function(){$(“body”).css(“background-color”,”yellow”);},

click:function(){$(“body”).css(“background-color”,”green”)}

})

4. 案例

<div  class="entrust">
    <button class="btn_class"> 测试 </button>
    <button class="b_class"> 测试_测试 </button>
    <div>
        <button class="btn_id"> 测试1 </button>
        <button class="b_id"> 测试_测试1 </button>
    </div>
</div>

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>entrust</title>
</head>
<body>
<div>
    <button> 测试 </button>
    <button> 测试-测试-测试 </button>
    <div>
        <button> 测试1 </button>
        <button> 测试-测试buttona </button>
    </div>
</div>

<script type="text/javascript" src="/js/jquery-1.8.3.js"></script>
<script>
    $(".oncase").on("click",".oncasebuttona",function(){
        console.log(this.class,"测试—class-oncasebuttona");
    });
    $('.oncasebutton').click(function () {
        console.log(this.class,"测试—class-oncasebutton")
    });
    $('.button').click(function () {
        $('<button> 测试-button </button>').append();
    });
    $('.buttona').click(function () {
        $("<button> 测试-测试buttona </button>").append();
    });
</script>
</body>

</html>