1、通过标签内部添加事件

(1)onclick事件:单击事件

(2)ondbclick事件:双击事件

(3)onload事件:只能在body中使用,入口函数里有:window.   。οnlοad=function(  ){  }

(4)onchange事件:改变事件

(5)onblur事件和onfocus事件:失去焦点和聚焦

(6)onscroll事件:滚动伦

(7)鼠标相关事件:

----------------------onmouseover移到对象上方是就触发事件,同一区域无论怎么移动就只触发一次

----------------------onmouseout鼠标离开对象触发事件调用函数

----------------------onmousemove移到对象上方是就处罚事件调用函数同一区域鼠标移动一次就触发一次,一般不常用

----------------------onmouseup鼠标抬起触发事件

----------------------onmousedown鼠标按下触发事件电泳函数

举例说明:

<body>
<div id="one" onclick="dianji()">点击事件</div>
<div id="one" ondblclick="shuangji()">双击事件</div>
改变事件:<input type="text" id="" name="" value="" placeholder="请输入账号" οnchange="change()"/><br>
失去焦点:<input type="text" id="" name="" value="" placeholder="失去焦点" οnblur="sqjd()"/><br>
获得焦点:<input type="text" id="" name="" value="" placeholder="获得焦点" οnfοcus="hdjd()"/><br>
<div id="mouse" class="mouse1" οnmοuseοver="over()">鼠标移动到某对象范围的上方时,触发事件调用函数。注意:在同一个区域中,无论怎样移动都只触发一次函数。</div>
<div id="mouse" class="mouse2" οnmοuseοut="out()">鼠标离开某对象范围时,触发事件调用函数。</div>
<div id="mouse" class="mouse3" οnmοusemοve="move()">鼠标移动到某对象范围的上方时,触发事件调用函数。注意:在同一个区域中,只要鼠标动一次就触发一次事件。</div>
<div id="mouse" class="mouse4" οnmοusedοwn="down()">当鼠标按下键时触发事件</div>
<div id="mouse" class="mouse5" οnmοuseup="up()">当鼠标松开时触发事件</div>

2、通过for循环添加事件

<div class="nav"><!--通过循环给多个元素添加事件-->
<div class="na">首页</div>
<div class="na">概况</div>
<div class="na">师资</div>
<div class="na">交流</div>
<div class="na">访客</div>

<script type="text/javascript">
window.οnlοad=function () {
}

//通过循环给多个元素添加事件
var nam=document.getElementsByClassName("na");
for(var i=0;i<nam.length;i++){
nam[i].οnmοuseοver=function(){
this.style.backgroundColor="red";
this.style.color="white";
}//鼠标上去背景由棕色变成红色,字体由黑色变成白色
nam[i].οnmοuseοut=function(){
this.style.backgroundColor="blue";
this.style.color="black";
}
}

</script>

3、通过addEventListener() 方法 监听事件函数

<body>

<button id="bt">添加监听事件点我</button><br><br><!--通过addEvenListener()方法 监听事件函数-->

</body>

<script type="text/javascript">
window.οnlοad=function () {
}

var btm=document.getElementById("bt");
btm.addEventListener("click",aa);
function aa(){
alert("我是监听点击事件")
}

</script>

转载于:https://www.cnblogs.com/yang1182/p/9528466.html

js常用对象:点击、双击、onload事件、鼠标相关、onblur事件和onfocus事件等;通过循环给多个元素添加事件、通过addEventListener() 方法 监听事件函数...相关推荐

  1. AWT_addKeyListener键盘监听事件(Java)

    AWT_addKeyListener键盘监听事件(Java) package reflect; import java.awt.*; import java.awt.event.KeyAdapter; ...

  2. HTML学习14-js 内置对象 Date() 常用的日期的方法 定时器 倒计时 监听事件

    内置对象 内置对象: 内置对象就是指这个语言自带的一些对象,供开发者使用,这些对象提供了一些常用的或是最基本而必要的功能. 手机买来就能发短信 就能打电话 日期函数 ( Date() ) 这个函数 ( ...

  3. js原生给生成的html添加点击事件,原生js为动态元素添加监听事件

    //已存在div //创建标签 function createpage(){ var span=document.createElement('span') span.innerHTML=" ...

  4. html js按钮事件监听,JS监听事件

    对象 - JS监听事件 ¶ 作者:KK 发表日期:2016.2.21 在准备讲解后面的window对象之前,这里将话题转回来事件这里 平时咱们在一个元素里加个onclick属性,属性值写JS代码,这样 ...

  5. 监听js变量的变化_JS监听事件型爬虫

    点击上方"Python数据科学",选择"星标公众号" 关键时刻,第一时间送达! 作者:zuobangbang 来源:zuobangbang 最近开始研究网页参数 ...

  6. iOS OC与JS交互(WebView监听事件)

    在iOS应用的开发过程中,我们经常会使用到WebView,当我们对WebView进行操作的时候,有时会需要进行源生的操作.那么我记下来就与大家分享一下OC与JS交互. 首先先说第一种方法,并没有牵扯O ...

  7. HQChart使用教程67 - 鼠标点击K线柱子监听事件

    HQChart使用教程67 - 鼠标点击K线柱子监听事件 点击K线事件 步骤 1. 注册监听事件 事件回调函数说明 参数说明: K线数据说明 交流QQ群: 950092318 HQChart代码地址 ...

  8. vue 点击事件传递多个参数_Vue子组件监听事件中传递参数的方法

    在子组件中,我们可以通过以下方式监听事件: v-on:click="$emit('funcName',a)" 如果需要传多个参数,可以通过以下方式: v-on:click=&quo ...

  9. 常用的监听事件(android)

    刚发布过Toast,为了是自己记得牢固一些在这里写几个监听事件 分别写出不同位置的Toast 监听常用的有四种 第一种:内部类作为事件监听器类 xml中代码 <RelativeLayout xm ...

最新文章

  1. essyui php,Easyui Linkbutton 链接按钮_EasyUI 插件
  2. 一小段代码:父类和子类
  3. window.event
  4. 一次给女朋友转账引发我对分布式事务的思考
  5. oracle数据库应用与开发习题,《Oracle数据库应用》练习题及答案.docx
  6. python僵尸进程和孤儿进程_python学习笔记——孤儿进程和僵尸进程
  7. win10禁止数字签名
  8. C语言 数组指针 - C语言零基础入门教程
  9. (13)Node.js 文件流 缓冲 VS 流
  10. java查漏补缺(基础篇)
  11. tar包zip的拆分与合并
  12. 计算机pc610台湾研华,研华科技工业电脑各尺寸上架式机箱型号介绍
  13. 中国科学技术大学计算机考研好考吗,中国科学技术大学计算机考研复习方法谈...
  14. 骨骼动画详解-Spine
  15. 计算机网络(谢希仁第七版)期末重点
  16. 渣男劈腿,两个女生却逼他做出选择,结果......
  17. 如何才能不看知乎广告?手机浏览器安装Edge扩展程序教程
  18. BGR转YUV420SP
  19. 拿下计算机三级证以后能干嘛,计算机三级证书用处
  20. 上号神器,穿越火线扫码登录教程

热门文章

  1. web网页设计期末课程大作业:环境保护主题网站设计——农业三级带表单带js(14页)HTML+CSS+JavaScript
  2. 用C#实现竖列转盘游戏
  3. java与..net薪资_J2EE和.NET的就业市场薪资对比
  4. 真•业界第一个性能统计分析框架 -- Hiper
  5. oracle注册表重建,一次Windows 注册表中注册表项目丢失导致的Oracle 数据库启动问题。...
  6. 计算机系统结构课后习题答案
  7. 小米note刷android8.1,【Android 8.1.0】RR-O For Xiaomi Mi Note Pro(小米Note顶配版)
  8. 冯唐:年轻人到底挣多少钱算够?
  9. cajviewer 卡顿
  10. MSTP多实例配置实验