前端js调用方法的几种方式

最近在做前端项目，因为没上vue还是原生的jq方法，所以遇到各种各样的问题，在这记录下几种前端触发的方法

1.onclick

在标签内直接写 οnclick=“qz(this)” 即可。然后js中写方法

<script type="text/javascript">
  qz = function (th) {
  alert(th.id)
}
script>

2 $(“#fxbsbutton”).click

第一个是写在标签内，有时候标签写完了或者写在其他地方无法修改，这个时候可以通过选择器写方法

<script type="text/javascript">
   $("#fxbsbutton").click(function () {
        alert(1)
    });
script>

3.select方法

上面都是点击时间，写在按钮或者某个标签块内，有时候下拉框改变的时候需要同时控制别的模块的显影

<select id="try" onchange="fun1()">
			<option value="1">1option>
			<option value="2">2option>
select>

<script type="text/javascript">
			function fun1(){
				var res = document.getElementById("try").value;
				alert(res);
			}
		script>

直接写在下拉框即可

3.select方法2

和上面一样，有时候标签内无法写方法，这个时候我们用的layui框架，里面提供了js的方法

 <select class="layui-select" name="wf_rectification" id="wf_rectification" lay-verType="tips"
                        lay-verify="required" lay-filter="isdisplay">

<script type="text/javascript">
   layui.use(['form'], function () {
        $ = layui.jquery;
        var form = layui.form;
        //监听选择
        form.on('select(isdisplay)', function (data) {
            if (data.value == '0') {
                document.getElementById('ishide').style.display = 'none';
            } else {
                document.getElementById('ishide').style.display = 'block';

            }
        });
    });
script>

lay-filter的值要和js中一样。

4.input只能输入数字

其实也是一中方法，一般用onkeyup和onkeydown，一个是键盘按上，一个是键盘按下的方法

<input type="text" onkeyup="value=value.replace(/[^\d]/g,'')" >


<input type="text" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" >


<input type="text" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,1})?).*$/g, '$1')" >


<input type="text" onkeyup="value=value.replace(/[^\d]/g,'').replace(/^0{1,}/g,'')" >

当然也可以写正常的方法

<input type="text" name = "text1" onkeydown = "checkForm()">

<script type="text/javascript">
  function checkForm(){
   }
script>

5.鼠标移入移出

有时候键盘触发有，也有鼠标移入移出的方法

<script type="text/javascript">
   $("#wfWorkHeight").bind('click mouseout', function (e){
   alert(1);
    })
script>

mouseenter、mouseleave、mouseover和mouseout的区别

mouseover和mouseout在父元素和其子元素都可以触发，当鼠标穿过一个元素时，触发次数得依子元素数量而言。
mouseenter和mouseleave只在父元素触发，当鼠标穿过一个元素时，只会触发一次。
mouseover和mouseout比mouseenter和mouseleave先触发