js 三大事件（鼠标.键盘.浏览器）
<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('鼠标离开')
}
<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();
<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 三大事件（鼠标.键盘.浏览器）的更多相关文章
- js 停止事件冒泡 阻止浏览器的默认行为
在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 浏览器默认行为: 在form中按回车键就会提交表单:单击鼠标右键就会弹出context menu. ...
- js 停止事件冒泡 阻止浏览器的默认行为（阻止超连接 # ）
在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...
- 用js onselectstart事件鼠标禁止选中文字
禁止鼠标选中文本,针对不同浏览器有不同的写法.常见的是onselectstart表示禁止鼠标选中文本.其中用js可以在页面中写 onselectstart="return false&quo ...
- js 停止事件冒泡 阻止浏览器的默认行为（阻止a标签跳转 ）
在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到"停止事件冒泡"和"阻止浏览器默认行为". 1..停止事件冒泡 JavaScript代码 //如果提供了 ...
- js 停止事件冒泡 阻止浏览器的默认行为（比如阻止超连接 # ）
在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ...
- js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...
- JS阻止事件冒泡与浏览器默认行为
阻止冒泡 W3C的方法是e.stopPropagation() IE是e.cancelBubble = true; 阻止默认行为 W3C的方法e.preventDefault(), IE是e.retu ...
- 由chrome剪贴板问题研究到了js模拟鼠标键盘事件
写在前面 最近公司在搞浏览器兼容的事情,所有浏览器兼容的问题不得不一个人包了.下面来说一下今天遇到的一个问题吧 大家都知道IE下面如果要获得剪贴板里面的信息的话,代码应该如下所示 window.cli ...
- Python_Selenium之basepage 识别元素、浏览器操作、获取属性、鼠标事件、键盘事件、弹窗、切换frame、切换句柄等封装
#coding=gbkimport osimport timefrom selenium import webdriverfrom selenium.webdriver.common.by impor ...
随机推荐
- Java中的Constants类
1.遇到代码中的问题 String userName = (String) request.getParameter("userName"); String passWord = ...
- spring中aop原理
- Gym101350 FMonkeying Around
题意 有n只猴子排成一排,一共有m个笑话.开始时,这些猴子都坐在椅子上.下面m行给出的每个笑话包含三个整数x,l,k.代表猴子x讲了笑话l,所以距离x小于等于k的猴子如果他们从没听过这个笑话,他们会掉 ...
- SSH连接Linux
转载自百度经验 https://jingyan.baidu.com/article/bea41d439d16d7b4c51be619.html 连接Linux的工具有Putty.SSH Secure ...
- Ionic01 简单介绍、环境搭建、创建项目、项目结构、创建组件、创建页面、子页面跳转
1 Ionic 基本介绍 Ionic 是一款基于 Angular.Cordova 的强大的 HTML5 移动应用开发框架 , 可以快速创建一个跨平台的移动应用.可以快速开发移动 App.移动端 WEB ...
- Ubuntu14.04（64位）下gcc-linaro-arm-linux-gnueabihf交叉编译环境搭建
1. 下载 gcc-linaro-arm-linux-gnueabihf-4.9.tar.gz 下载地址参考:http://blog.csdn.net/lg1259156776/article/det ...
- Entity Framework 6.0 Tutorials（9）：Stored Procedure Mapping
Code First - Insert, Update, Delete Stored Procedure Mapping: Entity Framework 6 Code-First provides ...
- 【原创】boost::recursive_mutex请小心使用
recursive_mutex会减少死锁几率?恩看上去的确如此,但是事实上呢?我们从BOOST的官方逻辑去理解: recursive_mutex类可多次进入锁,这样在递归时可以避免一次死锁的几率,这是 ...
- 黑盒测试实践-任务进度-Day02
使用工具 selenium 小组成员 华同学.郭同学.穆同学.沈同学.覃同学.刘同学 任务进度 在经过了昨天的基本任务分配之后,今天大家就开始了各自的内容,以下是大家任务的进度情况汇总. 华同学(任务 ...
- [Lua快速了解一下]Lua运行
-Lua的Hello World print("Hello World") 分号可选 -类似python,进入Lua后再shell中打命令执行语句也可 > print(&qu ...