事件笔记

最新推荐文章于 2024-09-14 17:54:00 发布

飘回大地的雨滴

最新推荐文章于 2024-09-14 17:54:00 发布

阅读量28

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/weixin_72891385/article/details/131895936

版权

鼠标事件：
onclick      -- 单击
ondblclick   -- 双击
onmousedown   -- 鼠标按下
onmouseup    -- 鼠标抬起
onmousemove   -- 鼠标移动
onmouseover   -- 鼠标悬浮
onmouseout   -- 鼠标离开
onmouseenter   -- 鼠标悬浮，可以阻止冒泡
onmouseleave    -- 鼠标离开，可以阻止冒泡
    oncontextmenu -- 鼠标右键点击
-------------------------------------------------
var x = 0
var y = 0
function fun(e){

   var x = event.clientX;--当前鼠标X轴
   var y = event.clientY;--当前鼠标Y轴
}
-------------------------------------------------
元素节点.事件名 = function(){效果}；
可直接在标签上写：
   <div οnclick="*()"></div>
   function *(){}；--定义函数*()
-------------------------------------------------
event: -- 当事件被触发时，
   自动产生的用于管理事件过程中，
   所有与事件相关的参数的对象

---------------------------------------------------
键盘事件：
   onkeydown   某个键盘按键被按下。
   onkeypress   某个键盘按键被按下并松开。
   onkeyup   某个键盘按键被松开。
---------------------------------------------------
window.onkeydown = function(event){
   var e = event || window.event; //标准化事件处理
   var s = event.type + " " + event.keyCode; //获取键盘事件类型和按下的值
   console.log(e)//按键的监听
   console.log(s)//按键的keyCode（即键码对照表）
}//显示键盘所按键的keyCode值
---------------------------------------------------
表单事件：
onblur       当元素失去焦点时运行脚本。
onfocus       当元素获得焦点时运行脚本。
onchange   当元素改变时运行脚本。
oninput       当元素获得用户输入时运行脚本。
onsubmit   当提交表单时运行脚本。

*** 所的表单控件，得到内容都是通过xx.value
设置内容都是通过xx.value = xxxx

------------------------------------------------------
正则表达式
元字符：单个元字符只能匹配一个值
.   查找单个字符，除了换行和行结束符。
\w   匹配字母、数字、下划线
\d   查找数字。
\s   查找空白字符。
\b   匹配单词边界。
\W   查找非单词字符。
\D   查找非数字字符。
\S   查找非空白字符。
\B   匹配非单词边界。

转义为普通字符：\\w

方括号
[abc]   查找方括号之间的任何字符。
[^abc]   查找任何不在方括号之间的字符。
[0-9]   查找任何从 0 至 9 的数字。
[a-z]   查找任何从小写 a 到小写 z 的字符。
[A-Z]   查找任何从大写 A 到大写 Z 的字符。
[A-z]   查找任何从大写 A 到小写 z 的字符。
[adgk]   查找给定集合内的任何字符。
[^adgk]   查找给定集合外的任何字符。

[] -- 匹配[]中罗列的所有内容
[^] -- 匹配除了[]中罗列的内容

(red|blue|green) 查找任何指定的选项。

量词
n+   匹配任何包含至少一个 n 的字符串。
n*   匹配任何包含零个或多个 n 的字符串。
n?   匹配任何包含零个或一个 n 的字符串。
n{X}   匹配包含 X 个 n 的序列的字符串。
n{X,Y}   匹配包含 X 至 Y 个 n 的序列的字符串。
n{X,}   匹配包含至少 X 个 n 的序列的字符串。
n$   匹配任何结尾为 n 的字符串。
^n   匹配任何开头为 n 的字符串。

---------------------------------------------------------
创建一个正则规则：
// var zz = new RegExp("js","g");
// var zz = /^[1-9]\d{4,10}$/;
// var zz = /^1[3-9]\d(1101|1002|1103|1105)$/
// var zz = /^[a-z 1-9]+_*[a-z 0-9]+@[a-z 1-9]+\.(com|cn|org)$/ //tanyan@qq.com

----------------------------------------------------------
例：

<body>
<input type="text" name="user" id="username" > <span></span>
</body>
<script>
var username = document.getElementById("username");
var _span = document.getElementsByTagName("span")[0];

var zz = /[-+.]/ig;
username.onkeyup = function(){

var value = this.value;

if(zz.test(value)){
_span.innerHTML = "√";
}else{
_span.innerHTML = "×";
}

}

</script>
-----------------------------------------------------------