29-Web-事件绑定与jQuery

最新推荐文章于 2022-04-03 21:00:18 发布

qq_48486897

最新推荐文章于 2022-04-03 21:00:18 发布

阅读量358

点赞数

本文链接：https://blog.csdn.net/qq_48486897/article/details/107760838

版权

本文详细探讨了jQuery中的事件绑定，包括按钮切换、查看大图、常见事件类型和事件捕获等核心概念。此外，还介绍了如何动态添加和删除事件，以及在实际项目中如何利用jQuery进行成都机动车限行查询、DOM操作、属性管理和实现广告轮播等应用。

摘要由CSDN通过智能技术生成

1.事件绑定

<!--
1. 事件三要素
 绑定事件是为了完成一个动作：什么标签发生了什么事情就干什么
 事件三要素: 事件源(发什么事件的标签)、事件(发生具体的事情)、事件驱动程序(事件源对事件做出的反应)
 
 小明打狗，狗就嗷嗷叫！

2.绑定事件：事件绑定是绑定在事件源
3.怎么绑定事件
a. 给事件源标签的事件属性赋值, 如果赋值的时候函数调用表达式，函数中的this是window
b.通过节点绑定事件1：事件源节点.事件属性 = 事件驱动函数  （函数中的this是事件源）
c.通过节点绑定事件2：事件源节点.addEventListener(事件名,函数)   （函数中的this是事件源）
  注意: 事件名是去掉 on 的事件名
  用addEventListener绑定事件的时候，可以做到给同一个标签的同一个事件同时绑定不同的驱动程序
 -->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        <!-- 1.直接给事件属性赋值 -->
        <button type="button" onclick="alert('点你了~')">点我呀</button>
        <button type="button" onclick="action1()">再点我呀1</button>
        <button type="button" onclick="action1()">再点我呀2</button>
        <button type="button" onclick="action1()">再点我呀3</button>
        <script type="text/javascript">
            // 1.直接给事件属性赋值
            function action1(){
    
                console.log(this)    //window对象
                console.log('事件绑定方式1')
            }
        </script>
        
        <!-- 2. 通过节点绑定事件-->
        <br><br>
        <button id="btn1" type="button">点我试试</button>
        <p>菜单：</p>
        <div id="box">
            <button type="button">红烧肉</button>
            <button type="button">鱼香肉丝</button>
            <button type="button">茄饼</button>
            <button type="button">毛血旺</button>
            <button type="button">北海道</button>
        </div>
        <script type="text/javascript">
            // 2. 通过节点绑定事件
            btn1Node = document.getElementById('btn1')
            btn1Node.onclick = function(){
    
                console.log(this)
                console.log('试试就试试！')
            }
            btn1Node.onclick = function(){
    
                console.log('我没点！')
            }
            
            // 批量绑定
            function order(){
    
                console.log(this)     // 点谁this就指向谁
                console.log(this.innerText)
            }
            allDishes = document.getElementById('box').children
            for(x=0;x<allDishes.length;x++){
    
                let btn = allDishes[x]
                btn.onclick = order
            }
            
        </script>
        
        <br><br>
        <!-- 3.通过 addEventListener 绑定事件-->
        <button id="btn2" type="button">不要点！</button>
        <script type="text/javascript">
            // 3.通过 addEventListener 绑定事件
            btn2 = document.getElementById('btn2')
            btn2.addEventListener('click', function(){
    
                console.log('叫你不要点！！')
                console.log(this)
            })
            btn2.addEventListener('click', function(){
    
                console.log('不点就不点！')
            })
            
            
        </script>
        
	</body>
    
    
</html>

2.按钮切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style type="text/css">
            button{
    
                width: 120px;
                height: 50px;
                border: 0;
                outline: 0;
                color: rgb(40, 40, 40);
                font-size: 23px;
                background-color: antiquewhite
            }
        </style>
	</head>
	<body>
        <button class="loginBtn" type="button" style="color: red;">扫码登录</button>
        <button class="loginBtn" type="button">账号登录</button>
        <!-- <button class="loginBtn" type="button">不登录</button> -->
	</body>
    
    <script type="text/javascript">
        // 获取所有的按钮(两个)
        buttons = document.getElementsByClassName('loginBtn')
        // 设置当前被选中的按钮(默认第一个按钮被选中)
        selectBtn = buttons[0]
        // 给按钮添加点击事件
        for(x=0; x<buttons.length;x++){
    
            btn = buttons[x]
            btn.onclick = loginAction
        }
        // 按钮点击事件
        function loginAction(){
    
            // 如果点击的按钮就是当前被选中的按钮不做任何操作
            if(this == selectBtn){
    
                return
            }
            // 将当前选中的按钮变成红色
            this.style.color = 'red'
            // 上次选中的按钮变成黑色
            selectBtn.style.color = 'rgb(40, 40, 40)'
            // 更新当前选中按钮的值
            selectBtn = this
        }
    </script>
    
</html>

3.看大图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        <div >
            <img id="img1" src="" >
        </div>
        <div id="div2">
            
        </div>
	</body>
    <script type="text/javascript">
        // 1.准备数据
        images = [
            {
    big:'img/picture-1.jpg', small:'img/thumb-1.jpg', title:''},
            {
    big:'img/picture-2.jpg', small:'img/thumb-2.jpg', title:''},
            {
    big:'img/picture-3.jpg', small:'img/thumb-3.jpg', title:''}
        ]
        // 2.根据数据创建节点
        div2 = document.getElementById('div2')
        images.forEach(function(item, x){
    
            // 创建图片节点
            img = document.createElement('img')
            // 设置图片
            img.src = item['small']
            // 保存图片对应的数据
            img.data = item
            // 显示节点
            div2.appendChild(img)
            // 绑定事件
            img.onmouseover = smallImageAction
            
            if(x == 0){
    
                document.getElementById('img1').src = item['big']
            }
            
        })
        
        // 小图片被点击的事件
        bigImg = document.getElementById('img1')
        function smallImageAction(){
    
            bigImg.src = this.data['big']
        }
        
    </script>
    
</html>

4.常用事件类型

<!-- 
    每一个事件驱动程序对应的函数在被调用的时候系统都会传一个实参，这个实参就是事件对象；可以根据这个实参
    事件相关的数据。
 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        
        <!-- 4. onload事件 -->
        <script type="text/javascript">
            window.onload = function(){
    
                // 这儿的代码会在页面中的内容加载完成后才会执行
                p1 = document.getElementById('p1')
                console.log('p1:', p1)
            }