简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > JQuery事件的注册与删除
Blogger Information
Blog 33
fans 0
comment 2
visits 42019
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JQuery事件的注册与删除
hanyufeng的博客
Original
546 people have browsed it

函数说明：

on() 方法：注册事件，需要带处理代码。

off()方法：删除事件，指定事件名。

注意： on() 方法重新注册之前注册过又删除的事件，处理代码也要再写一遍。

效果图：

j2.png

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery设置元素样式的几种方法</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div>
    <h2>PHP中文网</h2>
</div>
<button>禁用事件</button>
<button>恢复事件</button>

<script>
$(document).ready(function(){
    //在Ready事件中设置div样式
 $('div').css({  //多个参数可以放在一个字面量表示的js对象中
 'width': '200px',
 'height': '200px',
 'background': 'green'
 })
    });

//简写方式，JQuery允许有多个Ready事件处理函数
$(function ($) {  //$参数可省
 $('div').on('mouseenter', function () { //鼠标移入事件
 //放大，改变颜色
 $(this).css('width', '300px').css('height','300px')
            .css('background','yellow')
    }).on('mouseleave', function () { //鼠标移出事件
 //恢复
 $(this).css('width', '200px').css('height','200px').css('background','green')
    })
});

 var btn1 = document.getElementsByTagName('button')[0];
 btn1.onclick = function () {
        $('div').off('mouseenter');

 };

 var btn2 = document.getElementsByTagName('button')[1];
 btn2.onclick = function () {
            //恢复事件
 //注意：处理代码还需要再写一次
 $('div').on('mouseenter', function () { //鼠标移入事件
 $(this).css('width', '300px').css('height','300px')
                .css('background','yellow')
        })
    }
</script>
</body>
</html>


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！