对象 

  创建  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对象 事件的更多相关文章

  1. 初始js闭包&事件的冒泡和捕获&EVENT对象

    一.初识闭包 function a(){   var n = 0;   this.inc = function () {     n++;     console.log(n);   }; } var ...

  2. python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  3. Node.js自定义对象事件监听与发射

    一.Node.js是以事件驱动的,那我们自定义的一些js对象就需要能监听事件以及发射事件.在Node.js中事件使用一个EventEmitter对象发出,该对象在events模块中.它应该是使用观察者 ...

  4. Vue之挂载点、变量、事件、js对象、文本指令、过滤器、事件指令和属性指令

    1.vue导入-挂载点 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=&qu ...

  5. 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设计 的宗旨是“ ...

  6. js函数事件对象

    每个函数都有4个默认对象 arguments 保存着实际传入的参数,集合列表 return 有两个功能,打断函数和返回函数值 this 谁调用的函数,this就是谁 event 事件对象 事件 box ...

  7. js键盘事件全面控制详解

      js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件 ...

  8. Js 冒泡事件阻止

    Js 冒泡事件阻止   1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览 ...

  9. js event 事件兼容浏览器 ie不需要 event参数 firefox 需要

    js event 事件兼容浏览器    ie不需要 event参数   firefox 需要 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

随机推荐

  1. Java中的数据结构有哪些?HashMap的工作原理是什么?

    Java中常用数据结构 常用的数据结构有哈希表,线性表,链表,java.util包中有三个重要的接口:List,Set,Map常用来实现基本的数据结构 HashMap的工作原理 HashMap基于ha ...

  2. D3.js 区域生成器 (V3版本)

    区域生成器(Area Generator)   区域生成器(Area Generator)用于生成一块区域,使用方法与线段生成器类似.线段生成器地址:数据访问器有x().x0().x1().y().y ...

  3. Spring入门(三)

    测试Spring Bean的自动化装配 方式一:使用配置文件方式启动组件扫描 准备一个接口 package soundsystem; public interface CompactDisc { vo ...

  4. Stack&Heap的理解

    Heap(堆):在英文中有杂乱的堆意思,意译中文为堆:其特点为先进先出. 堆空间分配:一般由程序员分配释放, 若程序员不释放,程序结束时可能由OS回收,分配方式倒是类似于链表. Stack(栈):在英 ...

  5. java-----Long转换为 int , string

    int: 1.调用intValue()方法 long ll = 300000; int ii= new Long(ll).intValue(); 2.先把long转换成字符串String,然后在转行成 ...

  6. Jmeter-【beanshell处理器】-随机数(数字、字母、特殊符号、混合)

    一.自定义函数

  7. Spring,SpringMVC,SpringBoot,SpringCloud有什么区别和联系?

    简单介绍 Spring是一个轻量级的控制反转(IoC)和面向切面(AOP)的容器框架.Spring使你能够编写更干净.更可管理.并且更易于测试的代码. Spring MVC是Spring的一个模块,一 ...

  8. delphi xe10 蓝牙

    //蓝牙 System.Bluetooth //单元中主要包含以下几个类 TBluetoothManager.TBluetoothDeviceList.TBluetoothAdapter.TBluet ...

  9. lua数据类型与变量

    Lua数据类型与变量 Lua中有  8个基本类型分别为: nil.boolean.number.string.userdata.function.thread和 table. lua变量三种类型:全局 ...

  10. NOIp2018集训test-9-8(pm) (联考一day2)

    把T1题读错了,想了一个多小时发现不可做.然后打了t2,常数不优秀.然后去打t3,lct,结果打挂爆0了. 然后今天就爆炸了. 如果这是noip我今年就可以直接回去学常规了.学常规多好,多开心. 今天 ...