鼠标事件:
  click:单击
  dblclick:双击
  mousedown:鼠标按下
  mouseup:鼠标抬起
  mouseover:鼠标悬浮(进入)
  mouseout:鼠标离开(离开)
  mousemove:鼠标移动
  mouseenter:鼠标进入
  mouseleave:鼠标离开
<button onclick="myClick()">鼠标单击</button>
<button ondblclick="myDBClick()">鼠标双击</button>
<button onmousedown="myMouseDown()" onmouseup="myMouseUp()">鼠标按下和抬起</button>
<button onmouseover="myMouseOver()" onmouseout="myMouseOut()">鼠标悬浮和离开</button>
<button onmousemove="myMouseMove()">鼠标移动</button>
<button onmouseenter="myMouseEnter()" onmouseleave="myMouseLeave()">鼠标进入和离开</button>
function myClick() {
console.log("你单击了按钮!");
}; function myDBClick() {
console.log("你双击了按钮!");
}; function myMouseDown() {
console.log("鼠标按下了!");
}; function myMouseUp() {
console.log("鼠标抬起了!");
}; function myMouseOver() {
console.log("鼠标悬浮!");
}; function myMouseOut() {
console.log("鼠标离开!")
}; function myMouseMove() {
console.log("鼠标移动!")
}
function myMouseEnter() {
console.log('鼠标进入')
}
function myMouseLeave() {
console.log('鼠标离开')
}
键盘事件:
  keydown:按键按下
  keyup:按键抬起
  keypress:按键按下抬起
<input id="name" type="text" onkeydown="myKeyDown(this.id)" onkeyup="myKeyUp(this.id)"> 
 /*输出输入的字符*/
function myKeyDown(id) {
console.log(document.getElementById(id).value);
}
/*按键结束,字体转换为大写*/
function myKeyUp(id) {
var text = document.getElementById(id).value;
document.getElementById(id).value = text.toUpperCase();
HTML事件:
  load:文档加载完成
  select:被选中的时候
  change:内容被改变
  focus:得到光标
  resize:窗口尺寸变化
  scroll:滚动条移动
<body onload="loaded()">
<div style="height: 3000px" ></div>
<input type="text" id="name" onselect="mySelect(this.id)">
<input type="text" id="name2" onchange="myChange(this.id)">
<input type="text" id="name3" onfocus="myFocus()">
</body>
window.onload = function () {
console.log("文档加载完毕!");
};
/*window.onunload = function () {
alert("文档被关闭!");
};*/
/*打印选中的文本*/
function mySelect(id) {
var text = document.getElementById(id).value;
console.log(text);
}
/*内容被改变时*/
function myChange(id) {
var text = document.getElementById(id).value;
console.log(text);
}
/*得到光标*/
function myFocus() {
console.log("得到光标!");
}
/*窗口尺寸变化*/
window.onresize = function () {
console.log("窗口变化!")
};
/*滚动条移动*/
window.onscroll = function () {
console.log("滚动");
}

js 三大事件(鼠标.键盘.浏览器)的更多相关文章

  1. js 停止事件冒泡 阻止浏览器的默认行为

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 浏览器默认行为: 在form中按回车键就会提交表单:单击鼠标右键就会弹出context menu. ...

  2. js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 # )

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...

  3. 用js onselectstart事件鼠标禁止选中文字

    禁止鼠标选中文本,针对不同浏览器有不同的写法.常见的是onselectstart表示禁止鼠标选中文本.其中用js可以在页面中写 onselectstart="return false&quo ...

  4. js 停止事件冒泡 阻止浏览器的默认行为(阻止a标签跳转 )

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到"停止事件冒泡"和"阻止浏览器默认行为". 1..停止事件冒泡 JavaScript代码 //如果提供了 ...

  5. js 停止事件冒泡 阻止浏览器的默认行为(比如阻止超连接 # )

      在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ...

  6. js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...

  7. JS阻止事件冒泡与浏览器默认行为

    阻止冒泡 W3C的方法是e.stopPropagation() IE是e.cancelBubble = true; 阻止默认行为 W3C的方法e.preventDefault(), IE是e.retu ...

  8. 由chrome剪贴板问题研究到了js模拟鼠标键盘事件

    写在前面 最近公司在搞浏览器兼容的事情,所有浏览器兼容的问题不得不一个人包了.下面来说一下今天遇到的一个问题吧 大家都知道IE下面如果要获得剪贴板里面的信息的话,代码应该如下所示 window.cli ...

  9. Python_Selenium之basepage 识别元素、浏览器操作、获取属性、鼠标事件、键盘事件、弹窗、切换frame、切换句柄等封装

    #coding=gbkimport osimport timefrom selenium import webdriverfrom selenium.webdriver.common.by impor ...

随机推荐

  1. c盘不能新建文件的解决办法

    来自为知笔记(Wiz) 附件列表

  2. Objective-C 的 self 和 super 详解 (用简单程序说明问题)

    在 Objective-C 中的类实现中经常看到这两个关键字 "self" 和 "super",以以前 oop 语言的经验,拿 c++ 为例,self 相当于 ...

  3. Ceph基本情况介绍

    Ceph基本情况的介绍 Ceph是一个分布式存储软件. 它支持用3种方式存储数据,分别是:对象存储.块设备存储.分布式文件系统存储. Ceph最初的目标是做一个分布式文件系统,直到现在这个目标也不能算 ...

  4. SpringMVC Controller 介绍(详细深刻)

    一.简介 在SpringMVC 中,控制器Controller 负责处理由DispatcherServlet 分发的请求,它把用户请求的数据经过业务处理层处理之后封装成一个Model ,然后再把该Mo ...

  5. JS事件冒泡和事件捕获的详解

    在学校,听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样,只依稀记得IE使用的是事件冒泡,其他浏览器则是事件捕获.当时的我,把它当成IE浏览器兼容问题,所以没有深究(IE8以下版本的浏览器已基本退出 ...

  6. 配置springboot在访问404时自定义返回结果以及统一异常处理

    在搭建项目框架的时候用的是springboot,想统一处理异常,但是发现404的错误总是捕捉不到,总是返回的是springBoot自带的错误结果信息. 如下是springBoot自带的错误结果信息: ...

  7. web 应用中访问 Spring 具体实现

    user=LF password=LF jdbcUrl=jdbc:oracle:thin:@localhost:1521:orcl driverClass=oracle.jdbc.driver.Ora ...

  8. Luogu 4755 Beautiful Pair

    分治 + 主席树. 设$solve(l, r)$表示当前处理到$[l, r]$区间的情况,我们可以找到$[l, r]$中最大的一个数的位置$mid$,然后扫一半区间计算一下这个区间的答案. 注意,这时 ...

  9. Spring下面的@Transactional注解标志的讲解

    最近在开发中对Spring中的事务标记@Transactional用的比较多,今天上网收集了一些内容,做一个简单的总结~~~ 在service类前加上@Transactional,声明这个servic ...

  10. Part5核心初始化_lesson3---关闭看门狗

    1.看门狗---作用 2.看门狗工作方式 3.原理图 时钟源来自于PCLK经过分频器,经过选择器,输出到作为看门狗定时器,WTDAT为一个预载值,当它计数为零的时候,还没有给WTDAT赋值,那么它会发 ...