JS基础——事件操作总结

【JS基础——事件操作总结】的更多相关文章

JS基础——事件操作总结

通用事件绑定 function bindEvent(elem,type,fn) { elem.addEventListener(type,fn); } let a =document.getElementById('a'); bindEvent(a,'click',function(e){ e.preventDefault() //阻止浏览器默认行为,防止调转 alert(‘clicked’); }) 事件冒泡 <body> <div> <p id ="p1&…

js导读,js引入,js选择器,事件,操作页面文档,计算后样式,数据类型

js导读 ''' js属于编写运行在浏览器上的脚本语言 js采用ECMAScript语法操作BOM:浏览器对象模型 eg:浏览器上下滑动,浏览器历史记录操作DOM:文档对象模型 ''' js引入 <style> #box, #wrap, #temp, #res { width: 200px; height: 200px; background-color: red; margin-top: 10px; } </style> <!--1.行间式: js代码块也就是脚本书写在…

JS基础——事件绑定

上一篇博客JS事件对象中,老师问JS事件处理和VB中的事件处理有什么联系?先来解决一下这个问题.举个VB.net中事件处理的样例(JS敲久了,VB习惯的都不熟悉了,看来得常常回想了): 1.事件处理VB VS JS Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click MsgBox("helo!") MsgBox(sender.width) '弹出触发这个事件对象的宽度 Msg…

js基础——属性操作

html属性:属性名——属性值操作:读 . 写读操作:用来获取.找到属性名对应的属性值,方法:元素.属性名例如:var oBtn = document.getElementById('btn1'); alert(oBtn.value); 写操作:用来添加.替换.修改属性名与属性值,方法:元素.属性名 = 新的属性值例如:var oSelect = document.getElementById('select1'); oSelect.value = "aaa"; 但是,当…

2-4 js基础-事件对象小结

var e=ev||event; e.cancelBubble=true; document.documentElement html document.body body [所以写的时候一定要加document.documentElement.scrollTop] e.clientX;//鼠标在可视取中的x坐标. e.clientY//鼠标在可是去中的y坐标. //不兼容[不用] e.pageX;//鼠标在页面中的x坐标. e.page…

js基础——事件绑定（事件监听）

JavaScript事件一共有三种监听方法分别如下: 1.事件监听一夹杂在html标签内 <div id="box" onClick="alert('HELLO WORLD')"> <div id="box2" onClick="notice();"></div> <div id="box3" onClick="service('HELLO WORLD''…

JS基础-事件循环机制

从一道题浅说 JavaScript 的事件循环原文链接: https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/7 注:本篇文章运行环境为当前最新版本的谷歌浏览器(72.0.3626.109) 任务队列首先我们需要明白以下几件事情: JS分为同步任务和异步任务同步任务都在主线程上执行,形成一个执行栈主线程之外,事件触发线程管理着一个任务队列,只要异步任务有了运行结果,就在任务队列之中放置一个事件. 一旦执…

JS基础-事件

事件机制事件触发三阶段事件触发有三个阶段: window 往事件触发处传播,遇到注册的捕获事件会触发传播到事件触发处时触发注册的事件从事件触发处往 window 传播,遇到注册的冒泡事件会触发事件触发一般来说会按照上面的顺序进行,但是也有特例,如果给一个 body 中的子节点同时注册冒泡和捕获事件,事件触发会按照注册的顺序执行. 注册事件通常使用 addEventListener 注册事件,该函数的第三个参数可以是布尔值,也可以是对象.第三个参数默认值为 false,决定了注册的事件…

JS 基础事件的用法

// 1.9以上用on // 案例一 // $('#btn').on('click', function(){ // //console.log(1); // alert('测试...'); // }); // 案例二 // $('#btn').on('click mouseover', function(){ // //console.log(1); // alert('测试...'); // }); // 案例三 // $('#btn').on('mouseover mouseout', f…

js基础---元素操作时字符串拼接

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin:0px;padding:0px;} #box{position:relative;} #box div{width:20px;height:20px;background:red;position:absolute;} </st…