前端学习第二阶段Day12

最新推荐文章于 2024-10-04 00:46:18 发布
最新推荐文章于 2024-10-04 00:46:18 发布
阅读量649 收藏 1
点赞数
分类专栏： 二阶段学习笔记 文章标签： 前端 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_58114686/article/details/126609279
版权

目录

1.javaScript事件简介

        概念：

        事件三要素：

2.事件对象event

        每触发一个事件都会生成事件对象

        事件对象包含对事件的描述信息

        获取事件对象

                在事件处理函数中，获取的名字为event

                更改事件名：事件处理函数定义一个形参，接收事件对象

 IE兼容写法：

3.点击事件的光标坐标点获取

        1.相对事件源【你点击的元素】------offsetX，offsetY

        2.相对于浏览器窗口----------clientX,clientY

        3.相对于页面---------pageX,pageY

4. 常见的事件

        1.浏览器事件

        2.鼠标事件

        案例：

        3.键盘事件

        4.表单事件

        5.触摸事件

5.事件的绑定方式

        1.事件属性：

         2.事件绑定

        3.事件监听

   6.默认行为

       概念：

        阻止默认行为的两种方法：

1.javaScript事件简介

        概念：

                当我们点击一个按钮的时候，会弹出一个对话框。在JavaScript中，“点击”这个事情就看作一个事件。“弹出对话框”其实就是我们在点击事件中做的一些事。

        事件三要素：

                1.事件源：触发谁的事件

                2.事件类型：这个事件是干啥的，是点击呢，还是移动呢

                3.事件处理函数：事件过程做的一些事

<body>
    <button>按钮</button>

    <script>
        var btn = document.querySelector('button')

        btn.onclick = function(){
            alert('弹出内容') 
        }
        btn//事件源
        click//事件类型
        alert//事件处理函数
    </script>
</body>

2.事件对象event

        每触发一个事件都会生成事件对象

        事件对象包含对事件的描述信息

        获取事件对象

                在事件处理函数中，获取的名字为event

                更改事件名：事件处理函数定义一个形参，接收事件对象

        odivEle.οnclick=function(e){

        console.log(e)

        }//在每个事件处理函数的形参位置，默认第一个就是事件对象----这里是e

 IE兼容写法：

odivEle.οnclick=function(e){

        e = e || window.event

        }

3.点击事件的光标坐标点获取

        每个点击事件的坐标点都不是一对，因为要有一个相对的坐标系

        1.相对事件源【你点击的元素】------offsetX，offsetY

                是相对于你点击的元素的边框内侧开始计算

        2.相对于浏览器窗口----------clientX,clientY

                是相对于浏览器窗口来计算的，不管你页面滚动到什么情况，都是根据窗口来计算坐标

        3.相对于页面---------pageX,pageY

                是相对于整个页面的坐标点，不管有没有滚动，都是相对于页面拿到的坐标点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件对象</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background: pink;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        divEle=document.querySelector('div')
        divEle.onclick=function(e){
            e = e || window.event//兼容性写法
            console.log("基于自身:e.offsetX:",e.offsetX,"e.offsetY:",e.offsetY)
            console.log("基于浏览器窗口:e.clientX",e.clientX,"e.clientY:",e.clientY)
            console.log("基于文档页面：e.pageX：",e.pageX,"e.pageY:",e.pageY)
        }
    </script>
</body>
</html>

4. 常见的事件

        1.浏览器事件

                load：页面全部资源加载完毕

                scroll：浏览器滚动的时候触发

                resize：页面大小事件

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>浏览器相关事件</title>
		<!-- 
        浏览器相关事件
           load    文档加载完成事件
           scroll   滚动事件
           resize   窗口尺寸改变事件
     -->
		<script>
			window.onload = function () {
				// 这里面的代码，是html文档加载完成之后执行
                var divEle = document.querySelector('div')
				console.log(divEle)
				divEle.innerHTML = '新内容'
			}
		</script>
        <style>
            div{
                height: 1200px;
            }
        </style>
	</head>
	<body>
		<div>元素一</div>

        <script>
            // 浏览器窗口滚动事件
            window.onscroll = function(){
                console.log(document.documentElement.scrollTop)
            }

            // 浏览器窗口尺寸改变事件 - 移动端适配 
            window.onresize = function(){
                // 显示窗口尺寸
                console.log('w ',window.innerWidth, ' h ',window.innerHeight)
            }
        </script>
	</body>
</html>

        2.鼠标事件

                cilck:点击事件

                dbclick：双击事件

                contextmenu：右键单击事件

                mousedown：鼠标左键按下事件

                mouseup:鼠标左键抬起事件

                mouseover：鼠标移动

                mouseover：鼠标移入

                mouseout：鼠标移除事件

                mouseenter：鼠标移入事件

                mouseleave：鼠标移出事件

                onmouseover和onmouseenter的区别：

                          onmouseover、onmouseout：鼠标经过时自身触发事件，经过其子元素触发                        该事件

                        onmouseenter、onmouseleave:鼠标经过时自身触发事件，经过其子元素时不触发                  该事件。

        案例：

                区块移动：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            background: skyblue;
            width: 600px;
            height: 600px;
            position: relative;
            margin: 100px auto;
        }

        p {
            background: pink;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 10px;
            left: 10px;
            display: none;
            /* //鼠标移动当前元素不起作用 */
            pointer-events: none;
        }
    </style>
</head>

<body>
    <div>
        <p></p>
    </div>
    <script>
        var divEle = document.querySelector('div')
        var pEle = document.querySelector('p')
        //鼠标移入
        function over() {
            divEle.onmouseover = function () {
                pEle.style.display = 'block'
            }
        }
        over()
        //鼠标移出
        function out() {
            divEle.onmouseout = function () {
                pEle.style.display = 'none'
            }
        }
        out()
        //鼠标到小盒子上跟着鼠标动
        function mousemove() {
            //获取大盒子的距离
            divEle.onmousemove = function (e) {
                e = e || window.event
                // 鼠标位置移动到中间
                var x = e.offsetX - pEle.offsetWidth / 2
                var y = e.offsetY - pEle.offsetHeight / 2
                //不超出边框
                if (x < 0) {
                    x = 0
                }
                if (x > (divEle.offsetWidth-pEle.offsetWidth)) {
                    x = divEle.offsetWidth-pEle.offsetWidth//父盒子宽度-小盒子宽度 起点是在小盒子左上角
                }
                if(y<0)
                {
                    y=0
                }
                if(y>(divEle.offsetHeight-pEle.offsetHeight)){
                    y=divEle.offsetHeight-pEle.offsetHeight//
                }
                //将距离赋值给小盒子移动
                console.log(x, y)
                pEle.style.top = y + 'px'
                pEle.style.left = x + 'px'

            }
        }
        mousemove()
    </script>
</body>

</html>

        拖动效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>版本2</title>
    <!-- 
            拖动效果案例
              按在div上，div区块随光标一起移动，抬起div区块停止移动

         -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            background: skyblue;
            width: 100px;
            height: 100px;
            position: relative;
            /* margin: 100px ; */
        }
    </style>
</head>

<body>
    <div>
    </div>
    <script>
        var divEle = document.querySelector('div')
        //在小盒子上鼠标按下左键
        divEle.onmousedown = function () {
            // console.log(e)
            
            //鼠标移入---->获取的是移入文档的位置哦//事件源是文档
            document.onmousemove=function(e){
                e =e || window.event
                //clientX是基于窗口的
                var x = e.clientX-divEle.offsetWidth/2
                var y = e.clientY-divEle.offsetHeight/2
                console.log(x,y)
                divEle.style.top = y + 'px'
                divEle.style.left = x + 'px'
            }
        }

        // 鼠标松开左键
        document.onmouseup=function(){
            document.onmousemove=null
            // console.log(e)
        }
    </script>
</body>

</html>

        3.键盘事件

                keyup:键盘抬起事件

                keydown:键盘按下事件

                keypress:键盘按下再抬起事件--按住

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘事件</title>
    <!-- 
        键盘事件
          keyup    抬起
          keydown  按下
          keypress 按住 

        键码 keycode
        兼容性
        组合键盘才发生
        altKey  + 
        shiftKey + 
        ctrlKey + 
     -->
</head>
<body>
    <h2>键盘事件</h2>
    <script>
        document.onkeyup = function(e){
            e = e || window.event  // 兼容ie
            var keyCode = e.keyCode || e.which  // 兼容FireFox2.0
            if(e.ctrlKey && keyCode === 32){
                alert('登录成功')
            }
        }
    </script>
</body>
</html>

        4.表单事件

                submit：表单提交事件

                input：表单内容输入事件

                change：表单内容改变事件

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>表单事件</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			form {
				width: 500px;
				background-color: skyblue;
				margin: 100px auto;
				padding: 50px;
			}
			form input {
				width: 100%;
				line-height: 40px;
				margin-top: 20px;
			}

			#login {
				height: 40px;
			}
		</style>
		<!-- 
        表单事件
           表单提交事件
             submit

            表单提交事件 - 默认行为
            1. 触发表单提交事件
                submit  是表单form元素
                作用:
                    表单验证
                       - 非空验证
                           表单输入框内容不能为空

            2. 默认行为
               执行action属性指定的url地址跳转，同时获取表单输入框内容以名称值对形式做为参数传递
                https://www.xxx.com/?username=admin&password=123

               阻止表单默认行为
                 e.preventDefault()
            
            
     -->
	</head>
	<body>
		<form action="">
			<input type="text" placeholder="请输入用户名" name="username" /><br />
			<input type="password" placeholder="请输入密码" name="password" /><br />
			<input type="submit" value="确定" id="login" />
		</form>

		<script>
			var formEle = document.querySelector('form')
			var usernameInput = document.querySelector('input[name="username"]')
			var passwordInput = document.querySelector('input[name="password"]')

			//表单form提交事件
			formEle.onsubmit = function (e) {
				e = e || window.event // 事件对象
				e.preventDefault() // 阻止表单form默认行为
				//表单非空验证
				var username = usernameInput.value
				var password = passwordInput.value
				if (username === '') {
					alert('用户名不能为空!')
                    return 
				} else if (password === '') {
					alert('密码不能为空!')
                    return 
				}
                // 用户名密码验证
                if(username == 'admin' && password == '123'){
                    // 表单验证通过 跳转到主界面
                    location.href = './index.html'
                }else{
                    alert('用户名或密码出错!')
                }

			}
		</script>
	</body>
</html>

        5.触摸事件

                touchstart：触摸开始事件

                touchmove：触摸移动事件

                touchend:触摸结束事件

5.事件的绑定方式

        1.事件属性：

        把事件写在标签的属性里面

<input type="button" οnclick='alterMessage' value='' name='pwd'>

               优点：不用解决兼容性问题，几乎所有浏览器都支持

                缺点：夹杂在HTML代码中，代码不简洁，这种事件写法效率不高，不符合行为、样式、结构相分离

         2.事件绑定

        oDivEle.οnclick=function(){

        }

               优点：符合“行为、样式、结构”相分离，便于操作当事对象，方便读取事件对象

                缺点：只能给一个元素注册一个事件，绑定一个事件，后一个会覆盖前一个

        3.事件监听

                非IE7 8下使用

                        元素.addEventListener('事件类型',事件处理函数，冒泡还是捕获)

                --》如果有两个addEventListener函数会按照顺序执行 注意：事件类型的时候不写on，点击事件就是click，不是onclick

oDiv.addEventListener(''cilck'',function(){

                },false)//false默认值，表示注册的事件在冒泡阶段触发

                IE7 8下使用

                元素.attachEvent('事件类型',事件处理函数)

                --->当有两个相同的函数时，会按照注册的顺序倒序执行，注意：事件类型的时候要写on，点击事件onclick

oDiv.attachEvent('onclick',function(){

        })

   6.默认行为

       概念：

         就是不用我们注册，它自己就存在的事情，比如点击鼠标右键就会自动弹出一个菜单，地址的跳转

        阻止默认行为的两种方法：

                1.e.preventDefaulu()        非IE使用

                2.e.returnValue=false  IE使用

                兼容性写法

        a.submit=function(e){

        e=e || window.event

        e.preventDefault ? e.preventDefault : e.returnValue=false

        }

wuyuling111
关注
专栏目录
js(jquery)绑定点击事件
美丽的泡沫
07-22 2万+
test 第一种 $("#test").click(function(event) { /* Act on the event */}); 第二种 document.getElementById('#foo').addEventListener('click', function() { /* Act on the event */}, false); 第三种 html
HTML点击按钮弹出对话框（仅代码）
热门推荐
szx0427的博客
07-11 7万+
HTML点击按钮弹出对话框的代码（整个网页）： 无标题文档 function MsgBox() //声明标识符 { alert("我是对话框的内容"); //弹出对话框 } 注意：IE或IE内核浏览器可能会提示【已阻止此页访问ActiveX控件】，选择【允许阻止的内容】即可。
事件、鼠标事件的对象属性、键盘事件、事件流、组织事件冒泡、组织默认事件、阻止超链接；
John_Wick___的博客
07-12 138
事件对象 事件：对某个事件的某种操作； 事件对象：当某个事件触发时产生的对象，就是事件对象。 event：使用前提必须有事件 事件对象的兼容:var e=evt||event; eg:让图片跳一跳 <style> div{backgroun:url(../img.01png)} </style> <div></div> <script> var div=document.querySelector("div"); document.oncli
前端面试笔记
qq115482677的博客
06-30 143
一些基础的前端面试题
18.常见鼠标和键盘事件以及事件对象
Mr_LiuP的博客
02-23 1855
鼠标事件和键盘事件
前端学习第二阶段day15
qq_58114686的博客
09-03 750
js学习笔记
前端学习第二阶段day02
qq_58114686的博客
08-16 523
了解js中的基本语法以及会使用相关案例
前端学习第二阶段Day17
qq_58114686的博客
09-07 146
js轮播案例
前端学习第二阶段Day13
qq_58114686的博客
09-01 901
js笔记
【第三阶段 day25】前端脚手架的搭建 后端项目搭建 脚手架运行流程
oriettahuiru的博客
01-02 355
文章目录1.前端脚手架的搭建1.1安装与配置1.1.1 安装node.js1.1.2 检查node.js和npm版本1.1.3 切换淘宝npm库1.1.4 检查镜像配置是否失效1.1.5 安装VUE和客户端1.1.6 初始化vue工程1.2 操作过程2.后端项目搭建3.脚手架运行流程 1.前端脚手架的搭建 1.1安装与配置 1.1.1 安装node.js 1.1.2 检查node.js和npm版本 node -v node npm 1.1.3 切换淘宝npm库 npm config set reg
day12_javaweb_javascript_day12-xml_energy7fo_
10-03
【标题】"day12_javaweb_javascript_day12-xml_energy7fo_" 提供的资源包主要涵盖了JavaWeb开发中的JavaScript和XML技术，是作者个人学习过程中的一个阶段性的总结，虽然标注为“day2”，但可以推测整个系列应该包含...
慕课前端售1299元的面试题【第一阶段】JS-day02
weixin_46426412的博客
05-03 377
此内容确实价值1299这个价，本章包含event loop 机制，手写promise, async和await剖析，和与之对应的面试题
2020年12月-第02阶段-前端基础-CSS Day06
梁京的个人博客
05-25 127
CSS Day06 定位(position) 理解 能说出为什么要用定位 能说出定位的4种分类 能说出四种定位的各自特点 能说出我们为什么常用子绝父相布局 应用 能写出淘宝轮播图布局 1. CSS 布局的三种机制 网页布局的核心 —— 就是用 CSS 来摆放盒子位置。 CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流、浮动和定位，其中： 1.普通流（标准流） 2.浮动 让盒子从普通流中浮起来 —— 让多个盒子(div)水平排列成一行。 3.定位 将盒子定在某一个位置
Python第三阶段学习 day01
JanLEE
07-03 210
文章目录一、Web前端介绍1. 什么是网页2. 网页的组成3. 开发前的准备二、 HTML语法介绍1. HTML介绍2. 标签3. 使用三、常用标签介绍1. 基本结构解析2. body中常用标签3. 常用结构标签课后作业 一、Web前端介绍 1. 什么是网页 网页是基于浏览器的应用程序，是数据展示的载体. 2. 网页的组成 浏览器 代替用户向服务器发请求 接收并解析数据展示给用户 服务器 存储数据 处理并响应请求 协议 规范数据在传输过程中的打包方式 3. 开发前的准备
Vue根实例、实例总结
最新发布
m0_54007573的博客
10-04 365
Vue根实例、实例总结
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 590
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
登录功能开发 P167重点
2303_81204446的博客
09-30 369
前端无法识别controller方法，因此存在Dispa什么的。Claims：jwt中的第二部分。
Webpack 打包后文件过大，如何优化？
官方推荐
09-30 5821
Webpack 打包后文件过大，如何优化？
Web认识 -- 第一课
ZxVSaccount的博客
09-30 1170
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值