Jquery07--JQuery事件操作-javaScript事件对象-练习图片跟随

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

靠谱的大钊

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

阅读量240

点赞数

分类专栏： JQuery JavaScript 文章标签： js javascript vue html jquery

本文链接：https://blog.csdn.net/qq_44236958/article/details/112759424

版权

JQuery 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

JavaScript

7 篇文章 0 订阅

订阅专栏

JQuery事件操作

$(function(){})

和

window.οnlοad=function(){}

文章目录

JQuery事件操作

他们分别是在什么时候触发?

JQuery的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM对象之后就会马上执行
原生JS的页面加载完成之后,除了要等浏览器内核解析完标签创建好 DOM 对象.还要等标签显示时需要的类容加载完成

他们的触发顺序?

JQuery页面加载完成之后先执行
原生JS的页面加载完成之后

他们的执行次数:

原生JS的页面加载完成之后,只会执行最后一次的赋值函数
JQuery的页面加载完成之后是全部把注册的function函数,依次按照顺序全部执行

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	window.onload = function () {
		alert("原生js的页面加载完成之后--1")
	}
	window.onload = function () {
		alert("原生js的页面加载完成之后--2")
	}
	window.onload = function () {
		alert("原生js的页面加载完成之后--3")
	}
	$(function () {
		alert("jquery的页面加载完成 之后--3")
	});
	// jquery的页面加载完成 之后
	$(function () {
		alert("jquery的页面加载完成 之后--1")
	});
	$(function () {
		alert("jquery的页面加载完成 之后--2")
	});


</script>
</head>
<body>
	<button>我是按钮</button>
	
	<iframe src="http://localhost:8080"></iframe>
	<img src="http://localhost:8080/1.jpg" alt=""/>
</body>
</html>

JQuery中其他事件的处理方法:

clink() 它可以绑定单击事件,以及触发单击事件
mouseover() 鼠标移入事件
mouseout() 鼠标移出事件
bind 可以给元素一次绑定一个或者多个事件
one() 使用上跟bind一样,但是one方法绑定的事件之会相应一次
unbind() 跟bind方法相反的操作,解除事件的绑定
live() 也是用来绑定事件,他可以用来绑定选择器匹配的所有的元素事件,哪怕这个元素是后面动态创建出来的也有效

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    <link href="css/style.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
            //  $("h5").click(function () {     // 传function是绑定事件
            //     alert('h5单击事件 == click方法绑定')
            // })
            //

            // $("button").click(function () {
            //     $("h5").click(); // 不传function是触发事件
            // })

            //鼠标移入
            // $("h5").mouseover(function () {
            // 	console.log("你进来了")
            // });
            // //鼠标移出
            // $("h5").mouseout(function () {
            // 	console.log("你出去了")
            // });


            //  使用bind绑定事件
            //   $("h5").bind("click mouseover mouseout",function () {
            //   	console.log("这是bind绑定的事件");
            //   });

            // $("h5").one("click mouseover mouseout",function () {
            // 	console.log("这是one绑定的事件");
            // });
            // $("h5").unbind();

            // 使用live绑定的单击事件
            $("h5").live("click",function () {
                alert('h5单击事件 == live方法绑定');
            });

            $('<h5 class="head">什么是jQuery?</h5>').appendTo( $("#panel") );
        });

    </script>
</head>
<body>
<div id="panel">
    <h5 class="head">什么是jQuery?</h5>
    <div class="content">
        jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig
        创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
    </div>
    <button>按钮</button>
</div>
</body>

</html>

事件的冒泡

什么是事件冒泡?

事件的冒泡就是指父子元素同时监听同一个事件,当触发子元素的事件的时候,同一个事件也被传递到父元素的事件里去响应

那么如何阻止事件冒泡?

在子元素事件函数体内,return false,可以阻止事件的冒泡传递

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				font-size: 13px;
				line-height: 130%;
				padding: 60px;
			}
			#content{
				width: 220px;
				border: 1px solid #0050D0;
				background: #96E555;
			}
			span{
				width: 200px;
				margin: 10px;
				background: #666666;
				cursor: pointer;
				color: white;
				display: block;
			}
			p{
				width: 200px;
				background: #888;
				color: white;
				height: 16px;
			}
		</style>
		<script type="text/javascript" src="jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#content").click(function () {
					alert('我是div');
				});

				$("span").click(function () {
					alert('我是span');

				});
			})
		</script>
	</head>
	<body>
		<div id="content">
			外层div元素
			<span>内层span元素</span>
			外层div元素
		</div>
		
		<div id="msg"></div>	
		
		<br><br>
		<a href="http://www.hao123.com">WWW.HAO123.COM</a>	
	</body>
</html>

javaScript事件对象

事件对象,是封装有触发的事件信息的一个 javascript 对象,怎么拿到这个 javascript 的事件对象。以及使用。

如何让获取javascript 事件对象呢？

在给定元素绑定事件的时候,子啊事件的的 function( event ) 参列表中添加一个参数,这个参数,我们习惯取名为event,

这个event就是Javascript传递事件处理函数的事件对象

原生 javascript 获取事件对象

window.onload = function () {
    document.getElementById("areaDiv").onclick = function (event) {
    	console.log(event);
    }
}

JQuery代码获取事件对象

$(function () {
    $("#areaDiv").click(function (event){
  	  console.log(event);
    }); 
});

使用 bind 同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。

$("#areaDiv").bind("mouseover mouseout",function (event){
    if (event.type=="mouseover "){
   		 	console.log("鼠标移入");
        } else if (event.type == "mouseout") {
        	console.log("鼠标移出");
    }
});

事件对象代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <style type="text/css">

        #areaDiv {
            border: 1px solid black;
            width: 300px;
            height: 50px;
            margin-bottom: 10px;
        }

        #showMsg {
            border: 1px solid black;
            width: 300px;
            height: 20px;
        }

    </style>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript">

        //1 原生的javascript 获取事件对象
        // window.onload = function () {
        //     document.getElementById("areaDiv").onclick = function (event) {
        //         console.log(event);
        //     }
        // }


        //2 .JQuery代码获取 事件对象
       $(function () {
        //     $("#areaDiv").click(function (event) {
        //         console.log(event);
        //     })

           //3.使用bind同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件

           $("#areaDiv").bind("mouseover mouseout",function (event){
               if (event.type=="mouseover "){
                   console.log("鼠标移入");
               } else if (event.type == "mouseout") {
                   console.log("鼠标移出");
               }
           });


       });


    </script>
</head>
<body>

<div id="areaDiv"></div>
<div id="showMsg"></div>

</body>
</html>

练习图片跟随

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
        body {
            text-align: center;
        }

        #small {
            margin-top: 150px;
        }

        #showBig {
            position: absolute;
            display: none;
        }
    </style>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#small").bind("mouseover mouseout mousemove", function (event) {

                if (event.type == "mouseover") {
                    $("#showBig").show();
                } else if (event.type == "mousemove") {
                    console.log(event);
                    $("#showBig").offset({
                        left: event.pageX + 10,
                        top: event.pageY + 10
                    });
                } else if (event.type == "mouseout") {
                    $("#showBig").hide();
                }
            });
        });

    </script>
</head>
<body>

<img id="small" src="img/small.jpg"/>

<div id="showBig">
    <img src="img/big.jpg">
</div>

</body>
</html>

在这里插入图片描述

靠谱的大钊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery07--JQuery事件操作-javaScript事件对象-练习图片跟随

JQuery事件操作$(function(){})和window.οnlοad=function(){}文章目录JQuery事件操作他们分别是在什么时候触发?他们的触发顺序?他们的执行次数:JQuery中其他事件的处理方法:事件的冒泡那么如何阻止事件冒泡?javaScript事件对象事件对象代码练习图片跟随他们分别是在什么时候触发?JQuery的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM对象之后就会马上执行原生JS的页面加载完成之后,除了要等浏览器内核解析完标签创建好
复制链接

扫一扫