jQuery事件绑定、解绑、命名空间

最新推荐文章于 2024-07-15 14:11:16 发布

weixin_34024034

最新推荐文章于 2024-07-15 14:11:16 发布

阅读量55

点赞数

文章标签： javascript java ViewUI

jQuery事件绑定、解绑、命名空间

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<title>b index</title>
<link rel='stylesheet' type="text/css" href='b/css/bootstrap.css'>
<style type="text/css">
    .s1{
        width: 100px;
        height: 100px;
        background-color: pink;
    }
    .s2{
        width: 50px;
        height: 50px;
        background-color: green;
    }
</style>
</head>
<body style="margin:1px;">
    <div id="div001">div001</div>
    <div id='div002'>div002</div>
    <div id='div003'>div003</div>
    <div>
        <button id="btn001">click me to unbind div mouse event </button>
        <button id="btn002">click me to unbind div001Click02 </button>
        <button id="btn003">click me to bind div002 events </button>
        <button id="btn004">click me to trigger div002 events </button>
        <button id="btn005">click me to unbind div002 events </button>
        <button id="btn006">click me to bind div003 events </button>
        <button id="btn007">click me to trigger div003 events </button>
    </div>
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="b/js/bootstrap.js"></script>
    <script type="text/javascript" src="js/index041.js"></script>
</body>
</html>

$(function() {
    $('div').bind('mouseover mouseout', function() {
        // $(this).toggleClass('s1');
    });
    $('#btn001').click(btn001Click);
    $('#div001').bind('click', div001Click01);
    $('#div001').bind('click', div001Click02);
    $('#btn002').click(btn002Click);
    $('#btn003').click(btn003Click);
    $('#btn004').click(btn004Click);
    $('#btn005').click(btn005Click);
    $('#btn006').click(btn006Click);
    $('#btn007').click(btn007Click);
});
function btn001Click(e) {
    // $('div').unbind('mouseover');
    // 可以这样进行解除绑定；
    $('div').unbind('mouseover mouseout');
}
function div001Click01(e) {
    console.log('div001Click01');
}
function div001Click02(e) {
    console.log('div001Click02');
}
function btn002Click(e) {
    // 可以这样解除绑定两个事件中的一个事件；
    $('#div001').unbind('click', div001Click02);
}
function btn003Click(e) {
    // 这样绑定之后，直接点击div002也会触发事件；
    $('#div002').bind('click.plugin', function() {
        console.log('div002 click.plugin');
    });
    // 这样绑定之后，直接双击div002也会触发事件；
    $('#div002').bind('dblclick.plugin', function() {
        console.log('div002 dblclick.plugin');
    });
    // 这样绑定之后，鼠标直接移动也会触发事件；
    $('#div002').bind('mouseover.plugin', function() {
        console.log('div002 mouseover.plugin');
    });
}
function btn004Click(e) {
    // 这样触发不会触发任何事件；
    $('#div002').trigger('.plugin');
    // 这样可以触发click.plugin事件；
    $('#div002').trigger('click.plugin');
    // 这样也可以触发click事件；
    $('#div002').trigger('click');
}
function btn005Click(e) {
    // 这样可以解除所有.plugin事件绑定；
    $('#div002').unbind('.plugin');
}
function btn006Click(e) {
    $('#div003').bind('click',function(){
        console.log("div003 click");
    });
    $('#div003').bind('click.plugin',function(){
        console.log("div003 click.plugin");
    });
}
function btn007Click(e) {
    // 这样可以触发所有的click事件；
    $('#div003').trigger('click');
    // 这样竟然已经不能触发事件了；
    $('#div003').trigger('click!');
}

weixin_34024034

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery事件绑定、解绑、命名空间

jQuery事件绑定、解绑、命名空间&lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt;&lt;% String path = request.getContextPath(); String basePath = request.getScheme() + "://" ...
复制链接

扫一扫