js对象 事件
对象
创建 var myObject = {};/* 声明对象字面变量*/ 添加值myObject.name="Jener";myObject.age=25;
代码格式 var person = {name : "zhangsan",age : 25,say :function(){alert("说汉语");} }
访问 点语法、person.name; person.say();
js的入口函数 window.onload=function(){}
函数 有一定功能代码体的集合 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
基本结构 function functionname(){执行代码} function functionname(参数){执行代码}
带有返回值的函数 /*function sum(a,b){return a+b;}sum(10,5);//程序执行完这句话,sum(10,5)变成了15;var c=sum(10,5);alert(c);*///c是15
变量的生命周期 JavaScript 变量生命周期在它声明时初始化。局部变量在函数执行完毕后销毁。全局变量在页面关闭后销毁
闭包:是指内部函数可以使用外部函数的变量
js事件
onclick事件 点击事件 ondbclick事件 双击事件
onload事件 页面一开始加载的时候会先调用这个方法。此方法只能写在<body>标签之中
onchange事件 当内容改变时触发。可用于文本框、列表框等对象,该事件一般用于响应用户修改内容带来的其他改变操作。
说明:当用户向一个文本框中输入文本时,不会触发onchange事件,只有用户输入结束后,单击文本框以外的区域,
使文本框失去焦点时才触发该事件,如果是下拉框,则选择结束后即触发。
onblur事件和onfocus事件 onblur事件,当前元素失去焦点时触发该事件。对应的是onfocus事件:得到焦点事件
onscroll事件 窗口滚动事件:当页面滚动时调用函数。此事件写在方法的外面,且函数名后面不加括号,例如window.onscroll=move
方式 function move() {alert("页面滚动时调用");}window.onscroll = move;
鼠标相关事件 onmousemove 鼠标移动到某对象范围的上方时,触发事件调用函数。注意:在同一个区域中,只要鼠标动一次就触发一次事件。
onmouseout 鼠标离开某对象范围时,触发事件调用函数。
onmousemove 事件在鼠标移动到 div 元素上时触发。
mouseleave 事件只在鼠标指针移出 div 元素时触发。
onmouseout 事件在鼠标指针移出 div 元素及离开子元素(p 和 span)时触发。
onmouseover 鼠标移动到某对象范围的上方时,触发事件调用函数。注意:在同一个区域中,无论怎样移动都只触发一次函数。
onmouseup 当鼠标松开时触发事件
onmousedown 当鼠标按下键时触发事件
通过循环给多个元素添加事件
<body>
<div class="one">111</div>
<div class="one">222</div>
<div class="one">333</div>
<div class="one">444</div>
</body>
</html>
<script type="text/javascript">
var one = document.getElementsByClassName("one");
for(var i = 0;i<one.length;i++){
one[i].onclick = function(){
alert(this.innerHTML);
}
}
</script>
通过addEventListener() 方法 监听事件函数
无参数
<button id="myBtn">点我</button>
<script>
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
</script>
有参数
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
var p1 = 5;
var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
myFunction(p1, p2);
});
function myFunction(a, b) {
var result = a * b;
document.getElementById("demo").innerHTML = result;
}
</script>
removeEventListener() 方法
<body> <div id="myDIV"> div 元素添加了 onmousemove 事件句柄,鼠标在桔红色的框内移动时会显示随机数。
<p>点击按钮移除 DIV 的事件句柄。</p>
<button onclick="removeHandler()" id="myBtn">点我</button>
</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler() {
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>
js对象 事件的更多相关文章
- 初始js闭包&事件的冒泡和捕获&EVENT对象
一.初识闭包 function a(){ var n = 0; this.inc = function () { n++; console.log(n); }; } var ...
- python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- Node.js自定义对象事件监听与发射
一.Node.js是以事件驱动的,那我们自定义的一些js对象就需要能监听事件以及发射事件.在Node.js中事件使用一个EventEmitter对象发出,该对象在events模块中.它应该是使用观察者 ...
- Vue之挂载点、变量、事件、js对象、文本指令、过滤器、事件指令和属性指令
1.vue导入-挂载点 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=&qu ...
- java:JQuery(声明,JQ和JS对象的区别,prop,attr,addClass,offset,trigger,dblclick和change事件,hide,show,toggle,slideUp,slideDown,slideToggle,三种选择器,标签的获取,三张图片的放大与缩小)
1.JQuery: jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计 的宗旨是“ ...
- js函数事件对象
每个函数都有4个默认对象 arguments 保存着实际传入的参数,集合列表 return 有两个功能,打断函数和返回函数值 this 谁调用的函数,this就是谁 event 事件对象 事件 box ...
- js键盘事件全面控制详解
js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件 ...
- Js 冒泡事件阻止
Js 冒泡事件阻止 1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览 ...
- js event 事件兼容浏览器 ie不需要 event参数 firefox 需要
js event 事件兼容浏览器 ie不需要 event参数 firefox 需要 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
随机推荐
- rmq +二分暴力 hdu 5726
参考博客 题意:n 个数字的数列,有m个询问:求出 L 到 R 的 gcd(最大公约数 ),然后问这整个序列中有多少个区间的 gcd 和这个一样. 分析:L 到 R的gcd直接用RM ...
- Summary 报告
1.需要在添加一个名为summary report的监听器,跑完之后查看 Label:取样器/监听器名称 Samples :事务数量 Average:平均一个完成一个事务消耗的时间(平均响应时间) M ...
- 实现简单的PHP接口,以及使用js/jquery ajax技术调用此接口
主要介绍下如何编写简单的php接口,以及使用js/jquery的ajax技术调用此接口. Php接口文件(check.php): <?php $jsonp_supporter = $_GET[‘ ...
- js字符与ASCII码互转的方法
大写字母A-Z对应的ASCII码值是65-90 小写字母a-z对应的ASCII码值是97-122 将字母转为ascii码的方法: 将ascii码转为对应字母的方法:
- HTTP状态码(转)
转自菜鸟教程:https://www.runoob.com/http/http-status-codes.html HTTP状态码共分为5种类型: HTTP状态码分类 分类 分类描述 1** 信息,服 ...
- DOM 对象和jQuery对象的转换
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- CodeForces祝贺上紫
还是靠手速了. 不少比赛,经常差几分钟/一个细节就能AC一道比较难的题目. 加油! P.S 只能当成休闲性质,不能再当成正业了.迈向科研...
- SQL优化之慢查询和explain以及性能分析
性能优化的思路 首先需要使用慢查询功能,去获取所有查询时间比较长的SQL语句 使用explain去查看该sql的执行计划 使用show profile去查看该sql执行时的性能问题 MySQL性能优化 ...
- 【网络】IP地址,子网掩码,网段表示法,默认网关,DNS服务器详解
楔子: 以Windows系统中IP地址设置界面为参考(如图1), IP地址, 子网掩码, 默认网关 和 DNS服务器, 这些都是什么意思呢? 学习IP地址的相关知识时还会遇到网络地址,广播地址,子网等 ...
- 4 丑数 Ⅱ-找出第n个丑数
原题网址:http://www.lintcode.com/zh-cn/problem/ugly-number-ii/ 设计一个算法,找出只含素因子2,3,5 的第 n 小的数. 符合条件的数如:1, ...