jQuery 绑定事件

时间 2019-11-06

标签 jquery 绑定事件栏目 JQuery 繁體版

原文原文链接

jQuery 绑定事件html

事件1：jquery

// 鼠标点击出发事件
$('#id').click()

// * 委托、外部建立新的标签，自动将id标签下的a标签作绑定事件
$('#id').delegate('a','click',functon (){
})

$('#id').undelegate('a','click',functon (){
})

$('#id').bind('click',functon (){
})

$('#id').unbind('click',functon (){
})

$('#id').on('click',functon (){
})

$('#id').off('click',functon (){
})

其余

事件2：框架

注：a标签与onclick事件执行自定义事件优先级高。ide

阻止事件发生：this

$('#id').click(function (){
alert(xxx);
   // 阻止后续事件发生
    return false;
    // 容许后续事件发生
    return true;
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--添加提交表单跳转文件-->
<form action="s5.html" method="POST">
    <input type="text"/>
    <input type="submit" value="提交"/>
</form>

<script src="jquery-1.12.4.js"></script>
<script>
    $(':submit').click(function () {
        var v = $(this).prev().val();
        // 判断input内容是否为空
        if (v.length > 0) {
            // 不为空容许后续事件执行
            return true;
        } else {
            alert('请输出内容');
            // 终端后续发生事件
            return false
        }
    });
</script>
</body>
</html>

示例：简单表单验证处理

事件3：spa

页面加载完毕自动执行：code

// 当页面框架加载完毕以后，自动执行
$(function(){
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*添加样式*/
        .error {
            color: red;
        }
    </style>
</head>
<body>
<!--添加提交表单跳转文件-->
<form id='f1' action="s5.html" method="POST">
    <div><input name="n1" type="text"/></div>
    <div><input name="n2" type="password"/></div>
    <div><input name="n3" type="text"/></div>
    <div><input name="n4" type="text"/></div>
    <div><input name="n5" type="text"/></div>

    <!--提交按钮-->
    <input type="submit" value="提交"/>
</form>

<script src="jquery-1.12.4.js"></script>
<script>
    // 当页面框架加载完毕以后，自动执行
    $(function () {
        // 按钮触发事件
        $(':submit').click(function () {
            // 删除.error样式的标签
            $('.error').remove();
            // 设置值
            var flag = true;
            // 取出input下的相应内容,并循环
            $('#f1').find('input[type="text"],input[type="password"]').each(function () {
                // 取出input内容下面内容
                var v = $(this).val();
                // 判断input内容是否为0
                if (v.length <= 0) {
                    // 若是为0设置false
                    flag = false;
                    // 建立span标签
                    var tag = document.createElement('span');
                    // 添加样式
                    tag.className = 'error';
                    // 添加内容
                    tag.innerHTML = " * 必填";
                    // 添加span标签到指定下个一位置
                    $(this).after(tag);
                    // return false;
                }
            });
            return flag;
        });
    });
</script>
</body>
</html>

示例：表单验证、多输入框判断