用户登录
用户注册

分享至

JqueryOn绑定事件方法介绍

  • 作者: 据说开天辟地的是你爹
  • 来源: 51数据库
  • 2021-07-30

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>

 

软件
前端设计
程序设计
Java相关